[whatwg] [canvas] inner shadows

[Ian Hickson]

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();

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'