HTML中shadowblur属性,html - HTML5 Canvas, shadowColor & shadowBlur - Stack Overflow

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 you comment out the shadowColor and shadowBlur lines 21 & 22, and then uncomment the shadowColor and shadowBlur lines on lines 14 & 15, you should see what I mean.) My question is, how do I apply shadowBlur to one specific portion of the Canvas drawing without applying the feature to every succeeding portion of the Canvas. In this example I have tried creating separate variable for each canvas and context, but the problem still persists.

Attribution: These examples are based on examples from html5canvastutorials.com

function addRect(){

var canvas1=document.getElementById("myCanvas");

var ctx=canvas1.getContext("2d");

var canvas3=document.getElementById("myCanvas");

var ctx3=canvas3.getContext("2d");

ctx.rect(60,60,180,80);

ctx.fillStyle="green";

//ctx.shadowColor="black";

//ctx.shadowBlur = 10;

ctx.fill();

ctx3.lineWidth = 3;

ctx3.strokeStyle='red';

ctx3.shadowColor="black";

ctx3.shadowBlur = 10;

ctx3.strokeRect(45,45,210,110);

}

function addOval(){

var canvas2=document.getElementById("myCanvas");

var context=canvas2.getContext("2d");

// define center of oval

var centerX = 288;

var centerY = 250;

// define size of oval

var height = 100;

var width = 250;

var controlRectWidth = width * 1.33;

context.beginPath();

context.moveTo(centerX,centerY - height/2);

// draw left side of oval

context.bezierCurveTo(centerX-controlRectWidth/2,centerY-height/2,

centerX-controlRectWidth/2,centerY+height/2,

centerX,centerY+height/2);

// draw right side of oval

context.bezierCurveTo(centerX+controlRectWidth/2,centerY+height/2,

centerX+controlRectWidth/2,centerY-height/2,

centerX,centerY-height/2);

context.fillStyle="red";

context.fill();

context.lineWidth=5;

context.strokeStyle="blue";

context.stroke();

context.closePath();

}

Your browser does not support the canvas element.