Capt. Horatio T.P. Webb
HTML 5 -- CANVAS EXAMPLE SHADOWS

Parks -- Fall 2013

Methods:
name_for_the_canvas_context.shadowColor="value""value" = any color
name_for_the_canvas_context.shadowOffsetX=value value = integer amount of blur in the X direction
name_for_the_canvas_context.shadowOffsetY=value value= integer amount of blur in the Y direction
name_for_the_canvas_context.shadowBlur="value" value = integer (number of pixels to be blurred in the x and y diections

Here is a canvas for shadows:

<canvas id="shad_example" width="800" height="560" style="border:solid blue 1px;"></canvas>

HTML 5 Canvas is NOT supported by this browser

Here is the code: 

try {
     var shadx = document.getElementById("shad_example");
     var shadc = shadx.getContext("2d");
    }
catch (e)
   {
    alert ("HTML 5 Canvas is NOT supported by this browser");
    return;
   }
var shadx = document.getElementById("shad_example");
var shadc = shadx.getContext("2d");

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 2;
shadc.shadowOffsetY = 2;
shadc.shadowBlur = 0;
shadc.fillText("Captain Webb Offset=2 Blur=0", 20,30);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 2;
shadc.shadowOffsetY = 2;
shadc.shadowBlur = 1;
shadc.fillText("Captain Webb  Offset=2 Blur=1", 20,60);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 2;
shadc.shadowOffsetY = 2;
shadc.shadowBlur = 2;
shadc.fillText("Captain Webb Offset=2 Blur=2", 20,90);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 5;
shadc.shadowOffsetY = 5;
shadc.shadowBlur = 0;
shadc.fillText("Captain Webb  Offset=5 Blur=0", 20,120);


shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 5;
shadc.shadowOffsetY = 5;
shadc.shadowBlur = 3;
shadc.fillText("Captain Webb  Offset=5 Blur=3", 20,150);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 5;
shadc.shadowOffsetY = 5;
shadc.shadowBlur = 5;
shadc.fillText("Captain Webb Offset=5 Blur=5", 20,180);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 8;
shadc.shadowOffsetY = 8;
shadc.shadowBlur = 0;
shadc.fillText("Captain Webb Offset=8 Blur=0", 20,210);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 8;
shadc.shadowOffsetY = 8;
shadc.shadowBlur = 2;
shadc.fillText("Captain Webb Offset=8 Blur=2", 20,240);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 8;
shadc.shadowOffsetY = 8;
shadc.shadowBlur = 4;
shadc.fillText("Captain Webb Offset=8 Blur=4", 20,270);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 8;
shadc.shadowOffsetY = 8;
shadc.shadowBlur = 6;
shadc.fillText("Captain Webb Offset=8 Blur=6", 20,300);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = 8;
shadc.shadowOffsetY = 8;
shadc.shadowBlur = 8;
shadc.fillText("Captain Webb Offset=8 Blur=8", 20,330);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = -8;
shadc.shadowOffsetY = -8;
shadc.shadowBlur = 4;
shadc.fillText("Captain Webb Offset=-8 Blur=-4", 20,390);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = -5;
shadc.shadowOffsetY = -5;
shadc.shadowBlur = 3;
shadc.fillText("Captain Webb Offset=-5 Blur=3", 20,420);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = -4;
shadc.shadowOffsetY = -4;
shadc.shadowBlur = 2;
shadc.fillText("Captain Webb Offset=-4 Blur=2", 20,450);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = -3;
shadc.shadowOffsetY = -3;
shadc.shadowBlur = 3;
shadc.fillText("Captain Webb Offset=-3 Blur=3", 20,480);

shadc.fillStyle = "red";
shadc.font = "25px Comic Sans MS";
shadc.shadowColor = "black";
shadc.shadowOffsetX = -2;
shadc.shadowOffsetY = -2;
shadc.shadowBlur = 2;
shadc.fillText("Captain Webb Offset=-2 Blur=2", 20,510);