[whatwg] [canvas] inner shadows
cabanier at gmail.com
Fri Nov 23 21:11:57 PST 2012
On Fri, Nov 23, 2012 at 8:58 PM, Ian Hickson <ian at hixie.ch> wrote:
> On Fri, 23 Nov 2012, Rik Cabanier wrote:
> > >
> > > Turns out it's relatively easy to do today in canvas; after you've
> > > drawn your shape and filled it, just add the following code:
> > >
> > > c.save();
> > > c.clip();
> > > c.moveTo(0,0);
> > > c.lineTo(0,height);
> > > c.lineTo(width,height);
> > > c.lineTo(width,0);
> > > c.closePath();
> > > c.shadowColor = 'black';
> > > c.shadowBlur = 30;
> > > c.fill();
> > > c.restore();
> > I don't think that will work. Shadows are calculated before clipping so
> > they don't follow the clipping path.
> What matters is how they're painted, and that does follow the clipping
> path, as far as I can tell (step 4 of the drawing model).
What matters is the shape that is used to calculate the blur (step 1)
In your example, that shape is a rectangle so just the rectangle edges will
That slightly blurred rectangle is then composited with the clipping region
in step 4.
The end result is a solid rectangle in the shadowcolor that composites on
top of the shape.
> > Even if it was right, it would only apply to shapes and only if those
> > shapes didn't have strokes and were completely opaque.
> That's easy enough, though, you only need to make a shape that is what you
> want the inner shadow to go over, and then set the fill to black (or
> anything completely opaque).
How about the strokes?
> It's even easier with the new Path primitives
> since you can construct a combined path by stroking them all into one.
Unfortunately, the current path logic does not support unions.
It just does path accumulation which will not give you the desired result.
More information about the whatwg