private string sample16(ICanvasRenderingContext2D ctx)
{
// Create gradients
var radgrad = (ILinearCanvasGradient) ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
radgrad.addColorStop(0, "#A7D30C");
radgrad.addColorStop(0.9f, "#019F62");
radgrad.addColorStop(1, "rgba(1,159,98,0)");
var radgrad2 = (ILinearCanvasGradient) ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
radgrad2.addColorStop(0, "#FF5F98");
radgrad2.addColorStop(0.75f, "#FF0188");
radgrad2.addColorStop(1, "rgba(255,1,136,0)");
var radgrad3 = (ILinearCanvasGradient) ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
radgrad3.addColorStop(0, "#00C9FF");
radgrad3.addColorStop(0.8f, "#00B5E2");
radgrad3.addColorStop(1, "rgba(0,201,255,0)");
var radgrad4 = (ILinearCanvasGradient) ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
radgrad4.addColorStop(0, "#F4F201");
radgrad4.addColorStop(0.8f, "#E4C700");
radgrad4.addColorStop(1, "rgba(228,199,0,0)");
// draw shapes
ctx.fillStyle = radgrad4;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad;
ctx.fillRect(0, 0, 150, 150);
return @"Originals\Gradients\sample16.png";
}
private string sample9(ICanvasRenderingContext2D ctx)
{
// draw background
ctx.fillStyle = "#FD0";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#6C0";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#F30";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "#FFF";
// set transparency value
ctx.globalAlpha = 0.2F;
// Draw semi transparent circles
for (int i = 0; i < 7; i++)
{
ctx.beginPath();
ctx.arc(75, 75, 10 + 10*i, 0, Math.PI*2, true);
ctx.fill();
}
return @"Originals\Styles\sample9.png";
}
private string sample1(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgba(0,0,200,0.5)";
ctx.fillRect(30, 30, 55, 50);
return @"Originals\Styles\sample1.png";
}
private string CompositeOperationsXOR(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "#0f0";
ctx.strokeStyle = "#0f0";
ctx.shadowColor = "#00f";
ctx.shadowOffsetX = 32;
ctx.shadowOffsetY = 16;
ctx.shadowBlur = 8;
ctx.fillRect(32, 32, 128, 128);
ctx.globalCompositeOperation = "xor";
ctx.fillRect(96, 64, 128, 128);
return @"Originals\Shadows\XOR.png";
}
private string FillRect(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "#0f0";
ctx.strokeStyle = "#0f0";
ctx.shadowColor = "#00f";
ctx.shadowOffsetX = 32;
ctx.shadowOffsetY = 16;
ctx.shadowBlur = 8;
ctx.fillRect(32, 6, 128, 128);
return @"Originals\Shadows\FillRect.png";
}
private string sample19(ICanvasRenderingContext2D ctx)
{
ctx.fillRect(0, 0, 150, 150); // draw a rectangle with default settings
ctx.save(); // save the default state
ctx.fillStyle = "#09F"; // Make changes to the settings
ctx.fillRect(15, 15, 120, 120); // Draw a rectangle with new settings
ctx.save(); // save the current state
ctx.fillStyle = "#FFF"; // Make changes to the settings
ctx.globalAlpha = 0.5;
ctx.fillRect(30, 30, 90, 90); // Draw a rectangle with new settings
ctx.restore(); // restore previous state
ctx.fillRect(45, 45, 60, 60); // Draw a rectangle with restored settings
ctx.restore(); // restore original state
ctx.fillRect(60, 60, 30, 30); // Draw a rectangle with restored settings
return @"Originals\SaveRestore\sample19.png";
}
private string sample10(ICanvasRenderingContext2D ctx)
{
// Draw background
ctx.fillStyle = "rgb(255,221,0)";
ctx.fillRect(0, 0, 150, 37.5F);
ctx.fillStyle = "rgb(102,204,0)";
ctx.fillRect(0, 37.5F, 150, 37.5F);
ctx.fillStyle = "rgb(0,153,255)";
ctx.fillRect(0, 75, 150, 37.5F);
ctx.fillStyle = "rgb(255,51,0)";
ctx.fillRect(0, 112.5F, 150, 37.5F);
// Draw semi transparent rectangles
for (int i = 0; i < 10; i++)
{
ctx.fillStyle = "rgba(255,255,255," + (float) (i + 1)/10 + ')';
for (int j = 0; j < 4; j++)
{
ctx.fillRect(5 + i*14, 5 + j*37.5F, 14, 27.5F);
}
}
return @"Originals\Styles\sample10.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 Composite(ICanvasRenderingContext2D ctx, string compositeType)
{
// draw rectangle
ctx.fillStyle = "#09f";
ctx.fillRect(15, 15, 70, 70);
// set composite property
ctx.globalCompositeOperation = compositeType;
// draw circle
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75, 75, 35, 0, Math.PI*2, true);
ctx.fill();
ctx.commit();
return @"Originals\Compositions\" + compositeType + ".png";
}
private string sample15(ICanvasRenderingContext2D ctx)
{
// Create gradients
var lingrad = (ILinearCanvasGradient) ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, "#00ABEB");
lingrad.addColorStop(0.5, "#fff");
lingrad.addColorStop(0.5, "#26C000");
lingrad.addColorStop(1, "#fff");
var lingrad2 = (ILinearCanvasGradient) ctx.createLinearGradient(0, 50, 0, 95);
lingrad2.addColorStop(0.5, "#000");
lingrad2.addColorStop(1, "rgba(0,0,0,0)");
ctx.fillStyle = lingrad;
ctx.fillRect(10, 10, 130, 130);
ctx.strokeStyle = lingrad2;
ctx.strokeRect(50, 50, 50, 50);
return @"Originals\Gradients\sample15.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 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 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 sample17(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.fillStyle = ptrn;
ctx.fillRect(0, 0, 150, 150);
return @"Originals\Images\sample17.png";
}
private string sample29(ICanvasRenderingContext2D ctx)
{
// Create gradients
var lingrad = (ILinearCanvasGradient) ctx.createLinearGradient(0, 0, 0, 450);
lingrad.addColorStop(0, "#00ABEB");
lingrad.addColorStop(0.5, "#fff");
lingrad.addColorStop(0.5, "#26C000");
lingrad.addColorStop(1, "#fff");
var lingrad2 = (ILinearCanvasGradient) ctx.createLinearGradient(150, 175, 220, 200);
lingrad2.addColorStop(0.5, "#000");
lingrad2.addColorStop(0.7, "red");
lingrad2.addColorStop(1, "rgba(0,0,0,0)");
// assign gradient to fill
ctx.fillStyle = lingrad;
// draw shape
ctx.fillRect(0, 0, 390, 390);
// assign gradient to stroke
ctx.strokeStyle = lingrad2;
// draw shape
ctx.strokeRect(100, 100, 150, 150);
return @"Originals\Gradients\sample29.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";
}