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

Re: [whatwg] [canvas] inner shadows

From: Rik Cabanier <cabanier@gmail.com>
Date: Sat, 24 Nov 2012 08:21:20 -0800
Message-ID: <CAGN7qDCdcvtvGLQ_K-Cy57pj8NH=eQm71FvzSfXqyg_JEQ9kEw@mail.gmail.com>
To: Glenn Maynard <glenn@zewt.org>
Cc: whatwg@whatwg.org, Ian Hickson <ian@hixie.ch>
On Sat, Nov 24, 2012 at 7:59 AM, Glenn Maynard <glenn@zewt.org> wrote:

> On Fri, Nov 23, 2012 at 11:11 PM, Rik Cabanier <cabanier@gmail.com> wrote:
>
>> 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.
>>
>
> Testing with Hixie's code (https://zewt.org/~glenn/canvas-glow.html), the
> output is very close to "inner shadow" in Photoshop (distance 0, size 22):
> https://zewt.org/~glenn/canvas-glow.png.
>

yes! I forgot that clip doesn't clear the path so his example works.

I think it's possible to calculate to calculate the reverse shadow today
with temporary backing and compositing.
If so, the function to calculate them is not really necessary though it
would be still be nice to have a direct way to do an inner shadow.


> (I'm testing against inner shadow instead of inner glow; inner glow seems
> to do something a little more complex at the blur step than a gaussian
> blur.  Tested in Chrome 21; output in Firefox is different, but I probably
> need to update.)


True. Glow is a bit more complex than a plain (but not much).
Photoshop also does a 'multiply' blend with the shadow by default which
improves the look.
Received on Saturday, 24 November 2012 17:10:50 GMT

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