[whatwg] [canvas] inner shadows

[Rik Cabanier]

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
be blurred.
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.