HTML5 Canvas, shadowColor & shadowBlur

Question

My question is regarding this shadowBlur feature used on the 2nd (outer) rectangle below. The shadowBlur feature is applied to every shape after this rectangle. (If

Answer 1

    var canvas3=document.getElementById("myCanvas");
    var ctx3=canvas1.getContext("2d");

change canvas1 to canvas3 in the second line. Your ctx3 is actually pointing to canvas1 which i think is wrong.

Answer 2

Use either this:

ctx.save();
  ctx.shadowColor="black";
  ctx.shadowBlur = 10;       
  ctx.strokeRect(45,45,210,110); 
ctx.restore();

Or this:

ctx.shadowColor="black";
ctx.shadowBlur = 10;       
ctx.strokeRect(45,45,210,110); 
ctx.shadowColor= undefined; 
ctx.shadowBlur = undefined;       

I am not sure about 'undefined' in second case - something to nullify/reset the value.

Answer 3

You can also consider setting the shadow color to "transparent" instead of undefined or null. This also seems to do the trick.