[whatwg] [canvas] inner shadows

Rik Cabanier cabanier at gmail.com
Fri Sep 21 17:49:41 PDT 2012

With both types of shadow, you take the shape of the element and calculate
the blur image.

With an outer shadow, you take the result of the blur and composite it.
After this, you composite the original shape.
With an inner shadow, you draw the shape first followed by the blur image.
Importantly, the blur image also needs to clipped by the shape before it is

A user could implement an inner shadow by drawing multiple times and using
existing canvas methods, but it would be a pain...

On Fri, Sep 21, 2012 at 12:49 AM, Ian Hickson <ian at hixie.ch> wrote:

> On Thu, 26 Apr 2012, Tyler Larson wrote:
> >
> > Shadows can be applied to the outside of anything. This is a great
> > feature that is otherwise rather difficult to recreate but why not
> > enable users to be able to have inner shadows? Things like beveling,
> > embossing and many other stylistic things that are used in today designs
> > rely on inner shadows.
> > http://www.whatwg.org/specs/web-apps/current-work/#shadows
> >
> > It could just be a boolean value noting if rendering is done to the
> > inside or the outside of what is currently drawn into the context. In
> > CSS we have inset box-shadows, which gives a similar effect.
> > http://www.w3.org/TR/css3-background/#the-box-shadow
> >
> > Can we add this to the canvas shadows please?
> Can't you do this using clip() easily enough? Maybe I'm missing something
> important here. Can you elaborate?
> --
> Ian Hickson               U+1047E                )\._.,--....,'``.    fL
> http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
> Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

More information about the whatwg mailing list