[whatwg] [canvas] inner shadows

[Rik Cabanier]

On Fri, Nov 23, 2012 at 3:57 PM, Ian Hickson <ian at hixie.ch> wrote:

> On Fri, 23 Nov 2012, Ian Hickson wrote:
> > On Fri, 21 Sep 2012, Tyler Larson wrote:
> > > On Sep 20, 2012, at 6:49 PM, Ian Hickson <ian at hixie.ch> wrote:
> > > > Can't you do this using clip() easily enough? Maybe I'm missing
> > > > something important here. Can you elaborate?
> > >
> > > Here is an example of what I am talking about.
> > > http://i.imgur.com/Sy4xM.png
> > > Clip would mask something but adding an inner shadow is different and
> > > pretty difficult to reproduce when you take into account complex
> shapes.
> >
> > Ah, yeah, I see what you mean.
>
> I was wrong, I didn't see what you mean. 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 [1] so they don't follow the
clipping path.

Even if it was right, it would only apply to shapes and only if those
shapes didn't have strokes and were completely opaque.

1:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#drawing-model