W3C home > Mailing lists > Public > whatwg@whatwg.org > November 2012

Re: [whatwg] [canvas] inner shadows

From: Ian Hickson <ian@hixie.ch>
Date: Fri, 23 Nov 2012 23:57:56 +0000 (UTC)
To: Tyler Larson <talltyler@gmail.com>
Message-ID: <Pine.LNX.4.64.1211232356080.29456@ps20323.dreamhostps.com>
Cc: whatwg@whatwg.org
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@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.   `._.-(,_..'--(,_..'`-.;.'
Received on Saturday, 24 November 2012 00:55:52 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 30 January 2013 18:48:11 GMT