[whatwg] [canvas] inner shadows

[Rik Cabanier]

On Sat, Nov 24, 2012 at 8:21 AM, Rik Cabanier <cabanier at gmail.com> wrote:

> On Sat, Nov 24, 2012 at 7:59 AM, Glenn Maynard <glenn at zewt.org> wrote:
>
>> On Fri, Nov 23, 2012 at 11:11 PM, Rik Cabanier <cabanier at 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 put an example of this here: http://jsfiddle.net/cabanier/eav5V/
Unfortunately, Chrome has a bug in its handling of shadows so you have to
use a different browser.

This case uses a png with an alpha channel, but it can apply to shapes as
well.
It shows how you can calculate the inner shadow and how you can draw it on
top of your content.
The fourth canvas contains just the shadow. This is probably what Ian's
proposed function would return.


>
>
>> (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.
>