[whatwg] [canvas] inner shadows

Tyler Larson talltyler at gmail.com
Thu Apr 26 13:12:33 PDT 2012

Negitive offsets just gives you a shadow going in a negative direction but an inner shadow.
Here is a simple example...
<canvas id="c" />
  var canvas = document.getElementById('c');
  var context = canvas.getContext('2d');
  context.fillStyle = '#FF0';
  context.shadowColor = '#000';
  context.shadowOffsetX = -5;
  context.shadowOffsetY = -5;
  context.shadowBlur = 5;

and what it creates

Inner shadows would render into the elements that have been drawn. 

-Tyler Larson

On Apr 26, 2012, at 3:05 PM, David Geary wrote:

> You can specify negative shadow offsets for shadows inside a shape. Is that not good enough?
> david
> On Thursday, April 26, 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?
> -Tyler Larson

More information about the whatwg mailing list