Draw only shadows on html5-canvas

Question

I am trying to understand how I can draw something on the canvas and show only the shadow, for example:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.shadowBlur=100; ctx.shadowOffsetX = 150; ctx.shadowColor="red"; ctx.fillStyle="rgba(0,0,0,0.7)"; ctx.fillRect(20,20,100,80); 

Here I draw a black rectangle and add a red shadow with an offset, I would like to see only a shadow without a rectangle.

As you can see in the example, I tried using the rgba color, but when I set the opacity, it also affects the shadow.

here is the fiddle for this code: http://jsfiddle.net/YYvFw/

Answer 1

So, the first thing that comes to mind is moving the rectangle from the canvas and shifting the shadow as much as you need it.

  var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'), width = 100, height = 80, posX = 100, posY = 80; context.rect(-width, -height, width, height); context.shadowColor = 'red'; context.shadowBlur = 40; context.shadowOffsetX = width+posX; context.shadowOffsetY = height+posY; context.fill(); 

which draws a shadow at x: 100 y: 80

http://jsfiddle.net/S7WRx/2/

Answer 2

I do not know if there is an easy way to do this. The only thing I could think of was getImageData for the hidden area, and then clear the canvas and paste imageData data into it.