private string sample12(ICanvasRenderingContext2D ctx)
{
var lineCap = new[] {"butt", "round", "square"};
// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();
// Draw lines
ctx.strokeStyle = "black";
for (int i = 0; i < lineCap.Length; i++)
{
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25 + i*50, 10);
ctx.lineTo(25 + i*50, 140);
ctx.stroke();
}
return @"Originals\Lines\sample12.png";
}
private string sample11(ICanvasRenderingContext2D ctx)
{
for (int i = 0; i < 10; i++)
{
ctx.beginPath();
ctx.lineWidth = 1 + i;
ctx.moveTo(5 + i*14, 5);
ctx.lineTo(5 + i*14, 140);
ctx.stroke();
}
return @"Originals\Lines\sample11.png";
}
private void grid(ICanvasRenderingContext2D ctx, int w, int h, int size, int unit, string color, string color2)
{
int x, y, i, j;
for (i = 0, x = size; x < w; ++i, x += size)
{
ctx.beginPath();
ctx.strokeStyle = (i%unit != 0) ? color : color2;
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
ctx.stroke();
ctx.closePath();
}
for (j = 0, y = size; y < h; ++j, y += size)
{
ctx.beginPath();
ctx.strokeStyle = (j%unit != 0) ? color : color2;
ctx.moveTo(0, y);
ctx.lineTo(w, y);
ctx.stroke();
ctx.closePath();
}
}
private string sample25(ICanvasRenderingContext2D ctx)
{
// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
return @"Originals\Curves\sample25.png";
}
private string sample8(ICanvasRenderingContext2D ctx)
{
for (int i = 0; i < 6; i++)
{
for (int j = 0; j < 6; j++)
{
ctx.strokeStyle = "rgb(0," + Math.Floor(255 - 42.5*i) + ',' +
Math.Floor(255 - 42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5F + j*25, 12.5F + i*25, 10, 0, Math.PI*2, true);
ctx.stroke();
}
}
return @"Originals\Styles\sample8.png";
}
private void roundedRect(ICanvasRenderingContext2D ctx, double x, double y, double width, double height,
double radius)
{
ctx.beginPath();
ctx.moveTo(x, y + radius);
ctx.lineTo(x, y + height - radius);
ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
ctx.lineTo(x + width - radius, y + height);
ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
ctx.lineTo(x + width, y + radius);
ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
ctx.lineTo(x + radius, y);
ctx.quadraticCurveTo(x, y, x, y + radius);
ctx.stroke();
}
private string sample13(ICanvasRenderingContext2D ctx)
{
var lineJoin = new[] {"round", "bevel", "miter"};
ctx.lineWidth = 10;
for (int i = 0; i < lineJoin.Length; i++)
{
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(-5, 5 + i*40);
ctx.lineTo(35, 45 + i*40);
ctx.lineTo(75, 5 + i*40);
ctx.lineTo(115, 45 + i*40);
ctx.lineTo(155, 5 + i*40);
ctx.stroke();
}
return @"Originals\Lines\sample13.png";
}
private string ArcTo01(ICanvasRenderingContext2D ctx)
{
int x0 = 200, x1 = 250, x2 = 150, x3 = 200, y = 10, y3 = 80;
double y2 = 0.1;
int r = 10;
disc(ctx, x0, y, 4, "red");
disc(ctx, x1, y, 4, "red");
disc(ctx, x2, y + y2, 4, "red");
disc(ctx, x3, y3, 4, "green");
line(ctx, x0, y, x1, y, 1, "blue");
line(ctx, x1, y, x2, y + y2, 1, "blue");
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(x0, y);
ctx.arcTo(x1, y, x2, y + y2, r);
ctx.lineTo(x3, y3);
ctx.stroke();
return @"Originals\Shapes\ArcTo01.png";
}
private void drawSpirograph(ICanvasRenderingContext2D ctx, double R, double r, double O)
{
double x1 = R - O;
double y1 = 0;
int i = 1;
double x2, y2;
ctx.beginPath();
ctx.moveTo(x1, y1);
do
{
if (i > 20000) break;
double angle = i*Math.PI/72;
x2 = (R + r)*Math.Cos(angle) - (r + O)*Math.Cos(((R + r)/r)*angle);
y2 = (R + r)*Math.Sin(angle) - (r + O)*Math.Sin(((R + r)/r)*angle);
ctx.lineTo(x2, y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R - O && y2 != 0);
ctx.stroke();
}
private string sample32(ICanvasRenderingContext2D ctx)
{
var lingrad2 = (ILinearCanvasGradient) ctx.createLinearGradient(50, 50, 100, 100);
lingrad2.addColorStop(0.5, "#000");
lingrad2.addColorStop(0.7, "red");
lingrad2.addColorStop(1, "rgba(0,0,0,0)");
ctx.strokeStyle = lingrad2;
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI*2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI*2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI*2, true); // Right eye
//50, 50, 100, 100
ctx.stroke();
return @"Originals\Gradients\sample32.png";
}
private string sample5(ICanvasRenderingContext2D ctx)
{
var img = new ImageData();
img.src = @"backdrop.png";
ctx.drawImage(img, 0, 0, 0, 0);
ctx.beginPath();
ctx.moveTo(30, 96);
ctx.lineTo(70, 66);
ctx.lineTo(103, 76);
ctx.lineTo(170, 15);
ctx.stroke();
return @"Originals\Images\sample5.png";
}
private string sample3(ICanvasRenderingContext2D ctx)
{
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI*2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI*2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI*2, true); // Right eye
ctx.stroke();
return @"Originals\Shapes\sample3.png";
}
private void line(ICanvasRenderingContext2D ctx, double x0, double y0, double x1, double y1, double w,
string col)
{
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.lineWidth = w;
ctx.strokeStyle = col;
ctx.stroke();
}
private string TextPositions(ICanvasRenderingContext2D ctx)
{
int i, j;
string text = "Hello world";
var align = new[] {"left", "center", "right"};
var baseline = new[] {"top", "hanging", "middle", "alphabetic", "ideographic", "bottom"};
ctx.fillStyle = "#000";
ctx.strokeStyle = "#f00";
ctx.font = "20px Arial";
ctx.translate(70, 30);
for (i = 0; i < align.Length; i++)
{
for (j = 0; j < baseline.Length; j++)
{
ctx.save();
ctx.translate(i*170 + 0.5, j*50 + 0.5);
ctx.textAlign = align[i];
ctx.textBaseLine = baseline[j];
ctx.fillText(text, 0, 0);
ctx.beginPath();
ctx.moveTo(-50, 0);
ctx.lineTo(50, 0);
ctx.moveTo(0, -10);
ctx.lineTo(0, 10);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
return @"Originals\Text\TextPositions.png";
}
private string sample27(ICanvasRenderingContext2D ctx)
{
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.rect(0, 0, 100, 100);
ctx.stroke();
ctx.strokeStyle = "#fc0";
ctx.moveTo(0, 0);
ctx.translate(100.0, 0.0);
ctx.lineTo(0, 0);
ctx.translate(0, 100);
ctx.lineTo(0, 0);
ctx.translate(-100, 0);
ctx.lineTo(0, 0);
ctx.stroke();
return @"Originals\Transformations\sample27.png";
}
private string sample14(ICanvasRenderingContext2D ctx)
{
// Clear canvas
ctx.clearRect(-5, 0, 250, 250);
// Draw guides
ctx.strokeStyle = "#09f";
ctx.lineWidth = 2;
ctx.strokeRect(-5, 50, 160, 50);
// Set line styles
ctx.strokeStyle = "#000";
ctx.lineWidth = 10;
// check input
ctx.miterLimit = 10;
ctx.lineJoin = "miter";
// Draw lines
ctx.beginPath();
//ctx.moveTo(0, 0);
ctx.moveTo(0, 100);
for (int i = 0; i < 24; i++)
{
int dy = i%2 == 0 ? 25 : -25;
ctx.lineTo(Math.Pow(i, 1.5)*2, 75 + dy);
}
ctx.stroke();
return @"Originals\Lines\sample14.png";
}