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"; }