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 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 Fill(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "#0f0";
ctx.strokeStyle = "#0f0";
ctx.shadowColor = "#00f";
ctx.shadowOffsetX = 32;
ctx.shadowOffsetY = 16;
ctx.shadowBlur = 8;
ctx.moveTo(32, 32);
ctx.lineTo(128, 128);
ctx.lineTo(128, 32);
ctx.lineTo(32, 128);
ctx.fill();
return @"Originals\Shadows\Fill.png";
}
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 sample4(ICanvasRenderingContext2D ctx)
{
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5F, 20, 62.5F);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5F);
ctx.bezierCurveTo(130, 62.5F, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();
return @"Originals\Shapes\sample4.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 disc(ICanvasRenderingContext2D ctx, double x, double y, double r, string col)
{
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, r, 0, 2*Math.PI, false);
ctx.fillStyle = col;
ctx.fill();
}
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";
}
private string sample26(ICanvasRenderingContext2D ctx)
{
// Draw shapes
roundedRect(ctx, 12, 12, 150, 150, 15);
roundedRect(ctx, 19, 19, 150, 150, 9);
roundedRect(ctx, 53, 53, 49, 33, 10);
roundedRect(ctx, 53, 119, 49, 16, 6);
roundedRect(ctx, 135, 53, 49, 33, 10);
roundedRect(ctx, 135, 119, 25, 49, 10);
// Character 1
ctx.beginPath();
ctx.arc(37, 37, 13, Math.PI/7.0, -Math.PI/7.0, false);
ctx.lineTo(34, 37);
ctx.fill();
// blocks
for (int i = 0; i < 8; i++)
{
ctx.fillRect(51 + i*16, 35, 4, 4);
}
for (int i = 0; i < 6; i++)
{
ctx.fillRect(115, 51 + i*16, 4, 4);
}
for (int i = 0; i < 8; i++)
{
ctx.fillRect(51 + i*16, 99, 4, 4);
}
// character 2
ctx.beginPath();
ctx.moveTo(83, 116);
ctx.lineTo(83, 102);
ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
ctx.lineTo(111, 116);
ctx.lineTo(106.333, 111.333);
ctx.lineTo(101.666, 116);
ctx.lineTo(97, 111.333);
ctx.lineTo(92.333, 116);
ctx.lineTo(87.666, 111.333);
ctx.lineTo(83, 116);
ctx.fill();
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(91, 96);
ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
ctx.moveTo(103, 96);
ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(101, 102, 2, 0, Math.PI*2, true);
ctx.fill();
ctx.beginPath();
ctx.arc(89, 102, 2, 0, Math.PI*2, true);
ctx.fill();
return @"Originals\Curves\sample26.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 void drawStar(ICanvasRenderingContext2D ctx, int r)
{
ctx.save();
ctx.beginPath();
ctx.moveTo(r, 0);
for (int i = 0; i < 9; i++)
{
ctx.rotate(Math.PI/5);
if (i%2 == 0)
{
ctx.lineTo((r/0.525731)*0.200811, 0);
}
else
{
ctx.lineTo(r, 0);
}
}
ctx.closePath();
ctx.fill();
ctx.restore();
}
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 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();
}
