Example #1
0
 private string StrokeRect(ICanvasRenderingContext2D ctx)
 {
     ctx.fillStyle = "#0f0";
     ctx.strokeStyle = "#0f0";
     ctx.shadowColor = "#00f";
     ctx.shadowOffsetX = 32;
     ctx.shadowOffsetY = 16;
     ctx.shadowBlur = 8;
     ctx.strokeRect(32, 25, 128, 128);
     return @"Originals\Shadows\StrokeRect.png";
 }
Example #2
0
        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";
        }
Example #3
0
        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";
        }
Example #4
0
        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";
        }