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

[whatwg] [canvas] inner shadows

From: Tyler Larson <talltyler@gmail.com>
Date: Thu, 26 Apr 2012 16:12:33 -0400
Message-ID: <F18E53DF-AE39-4F3A-8BAA-FC6EAC6D3440@gmail.com>

Negitive offsets just gives you a shadow going in a negative direction but an inner shadow.
Here is a simple example...
<canvas id="c" />
<script>
  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;
  context.fillRect(50,50,50,50);
</script>

and what it creates
http://i.imgur.com/JsYy9.png

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
Received on Thursday, 26 April 2012 13:12:33 GMT

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