Question

If I draw a rectangle to the canvas, and I enable the shadows, then there will be created inner, and outer shadows too, but I only want outer shadow.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.shadowColor = 'black';
ctx.shadowBlur = 5;

ctx.strokeRect(20,30,150,75);

The only way I’ve found is ctx.clearRect(20,30,150,75);. But it’s not really what I want, because there may be something under my rect, and I don’t want to delete it.

Thanks in advance,

Answer 1

You could fetch the pixels inside the rectangle, do the painting and put those pixels back. That way, pixels inside the rectangle won’t change: http://jsfiddle.net/dkAKE/.

var imgdata = ctx.getImageData(20, 30, 150, 75);
ctx.strokeRect(20, 30, 150, 75);
ctx.putImageData(imgdata, 20, 30);

To retain the border, use (21, 31, 148, 73) as the area (assuming a stroke width of 1px).