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 PatternAndTransformation(ICanvasRenderingContext2D ctx)
{
// create new image object to use as pattern
IImageData img = new ImageData();
img.src = @"wallpaper.png";
// create pattern
object ptrn = ctx.createPattern(img, "repeat");
ctx.translate(50, 0);
ctx.rotate(Math.PI*2/(6));
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 150, 150);
return @"Originals\Images\PatternAndTransformation.png";
}
private string sample20(ICanvasRenderingContext2D ctx)
{
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < 3; j++)
{
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50 + j*100, 50 + i*100);
ctx.fillRect(0, 0, 20, 20);
ctx.restore();
}
}
return @"Originals\Transformations\sample20.png";
}
private string sample21(ICanvasRenderingContext2D ctx)
{
ctx.translate(75, 75);
for (int i = 1; i < 6; i++)
{
// Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = "rgb(" + (51*i) + "," + (255 - 51*i) + ",255)";
for (int j = 0; j < i*6; j++)
{
// draw individual dots
ctx.rotate((float) Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0, i*12.5F, 5, 0, Math.PI*2, true);
ctx.fill();
ctx.commit();
}
ctx.restore();
}
return @"Originals\Transformations\sample21.png";
}
private string Clip(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 150, 150);
ctx.translate(75, 75);
// Create a circular clipping path
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI*2, true);
ctx.clip();
// draw background
var lingrad = (ILinearCanvasGradient) ctx.createLinearGradient(0, -75, 0, 75);
lingrad.addColorStop(0, "#232256");
lingrad.addColorStop(1, "#143778");
ctx.fillStyle = lingrad;
ctx.fillRect(-75, -75, 150, 150);
// draw stars
var r = new Random();
for (int j = 1; j < 50; j++)
{
ctx.save();
ctx.fillStyle = "#fff";
ctx.translate(75 - (int) (r.NextDouble()*150),
75 - (int) (r.NextDouble()*150));
drawStar(ctx, (int) (r.NextDouble()*4 + 2));
ctx.restore();
}
return @"Originals\Shapes\Clip.png";
}
private string sample22(ICanvasRenderingContext2D ctx)
{
ctx.fillRect(0, 0, 300, 300);
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < 3; j++)
{
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50 + j*100, 50 + i*100);
double R = 20*(j + 2.0)/(j + 1.0);
double r = -8*(i + 3.0)/(i + 1.0);
drawSpirograph(ctx, R, r, 10);
ctx.restore();
}
}
return @"Originals\Transformations\sample22.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 sample24(ICanvasRenderingContext2D ctx)
{
ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0, 0, 300, 300);
// Uniform scaling
ctx.save();
ctx.translate(50, 50);
drawSpirograph(ctx, 22, 6, 5); // no scaling
ctx.translate(100, 0);
ctx.scale(0.75, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(133.333, 0);
ctx.scale(0.75, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
// Non-uniform scaling (y direction)
ctx.strokeStyle = "#0cf";
ctx.save();
ctx.translate(50, 150);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
// Non-uniform scaling (x direction)
ctx.strokeStyle = "#cf0";
ctx.save();
ctx.translate(50, 250);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(133.333, 0);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(177.777, 0);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
return @"Originals\Transformations\sample24.png";
}
private string sample23(ICanvasRenderingContext2D ctx)
{
double sin = Math.Sin(Math.PI/6);
double cos = Math.Cos(Math.PI/6);
ctx.translate(150, 150);
double c = 0;
for (int i = 0; i <= 12; i++)
{
c = Math.Floor(Convert.ToDouble(255/12*i));
ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
ctx.fillRect(0, 0, 100, 10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.setTransform(-1, 0, 0, 1, 150, 150);
ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
ctx.fillRect(0, 50, 100, 100);
return @"Originals\Transformations\sample23.png";
}
