javascript - Draw only shadows on html5-canvas - Stack Overflow

I'm trying to figure out how I can draw something on canvas and show only it's 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'd like to see only the shadow without the rectangle.

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

here is a fiddle for this code: /

I'm trying to figure out how I can draw something on canvas and show only it's 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'd like to see only the shadow without the rectangle.

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

here is a fiddle for this code: http://jsfiddle/YYvFw/

• javascript
• html
• html5-canvas

Share Improve this question Follow edited Jun 12, 2013 at 9:38 Gilad_Gr asked Jun 12, 2013 at 9:33 Gilad_GrGilad_Gr 30333 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 16

well the first thing that es to mind is moving the rectangle out of the canvas and offsetting the shadow as far 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();

that draws you the shadow at x:100 y:80

http://jsfiddle/S7WRx/2/

I don't know if there's an easy way to do it. The only thing I could think of is to getImageData for the shadowed area, and then clear the canvas and paste that imageData onto it.