Re: [whatwg] [canvas] inner shadows
On Sat, Nov 24, 2012 at 8:21 AM, Rik Cabanier wrote: > On Sat, Nov 24, 2012 at 7:59 AM, Glenn Maynard wrote: > >> On Fri, Nov 23, 2012 at 11:11 PM, Rik Cabanier 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. >
Re: [whatwg] [canvas] inner shadows
On Sat, 24 Nov 2012, Rik Cabanier wrote: > > > > > > How about the strokes? > > > > The example in the OP didn't have them, but you'd have to include them > > in the fill area. With the new Path objects, you'd just use > > addPathByStrokingPath(), which would be relatively simple. > > Unfortunately the winding rules will mess up your shape. (non-zero > winding) > > Take for instance a stroked circle. The stroke which is added with > addPathByStrokingPath will always create a hole so you end up with a > donut instead of just a slightly larger circle. Right: > > So long as they don't overlap, that's not generally a problem. But > > sure, for some complex shapes you'd need some new feature or other, > > whether it's in shadows or path construction or elsewhere. In the case of a circle, if you wanted to draw the inner shadow over the stroke and the fill, you'd have to create the path as just a fill with the radius increased by half the line width. -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] [canvas] inner shadows
On Fri, Nov 23, 2012 at 10:30 PM, Ian Hickson wrote: > On Fri, 23 Nov 2012, Rik Cabanier wrote: > > On Fri, Nov 23, 2012 at 8:58 PM, Ian Hickson wrote: > > > On Fri, 23 Nov 2012, Rik Cabanier wrote: > > > > > > > > > > Turns out it's relatively easy to do today in canvas; after you've > > > > > drawn your shape and filled it, just add the following code: > > > > > > > > > > c.save(); > > > > > c.clip(); > > > > > c.moveTo(0,0); > > > > > c.lineTo(0,height); > > > > > c.lineTo(width,height); > > > > > c.lineTo(width,0); > > > > > c.closePath(); > > > > > c.shadowColor = 'black'; > > > > > c.shadowBlur = 30; > > > > > c.fill(); > > > > > c.restore(); > > > > > > > > I don't think that will work. Shadows are calculated before clipping > so > > > > they don't follow the clipping path. > > > > > > What matters is how they're painted, and that does follow the clipping > > > path, as far as I can tell (step 4 of the drawing model). > > > > What matters is the shape that is used to calculate the blur (step 1) In > > your example, that shape is a rectangle-- > > No, no, the rectangle is just added to the existing path. The code snippet > above comes _after_ you've drawn the shape. > True. I forgot that the clip doesn't do a newpath. Sorry about that! > > > > > > Even if it was right, it would only apply to shapes and only if > > > > those shapes didn't have strokes and were completely opaque. > > > > > > That's easy enough, though, you only need to make a shape that is what > > > you want the inner shadow to go over, and then set the fill to black > > > (or anything completely opaque). > > > > How about the strokes? > > The example in the OP didn't have them, but you'd have to include them in > the fill area. With the new Path objects, you'd just use > addPathByStrokingPath(), which would be relatively simple. > Unfortunately the winding rules will mess up your shape. (non-zero winding) Take for instance a stroked circle. The stroke which is added with addPathByStrokingPath will always create a hole so you end up with a donut instead of just a slightly larger circle. > > > > > It's even easier with the new Path primitives since you can construct > > > a combined path by stroking them all into one. > > > > Unfortunately, the current path logic does not support unions. It just > > does path accumulation which will not give you the desired result. > > So long as they don't overlap, that's not generally a problem. But sure, > for some complex shapes you'd need some new feature or other, whether it's > in shadows or path construction or elsewhere. > > -- > Ian Hickson U+1047E)\._.,--,'``.fL > http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. > Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.' >
Re: [whatwg] [canvas] inner shadows
On Sat, Nov 24, 2012 at 8:36 AM, Ian Hickson wrote: > On Sat, 24 Nov 2012, Rik Cabanier wrote: > > > > > > > > How about the strokes? > > > > > > The example in the OP didn't have them, but you'd have to include them > > > in the fill area. With the new Path objects, you'd just use > > > addPathByStrokingPath(), which would be relatively simple. > > > > Unfortunately the winding rules will mess up your shape. (non-zero > > winding) > > > > Take for instance a stroked circle. The stroke which is added with > > addPathByStrokingPath will always create a hole so you end up with a > > donut instead of just a slightly larger circle. > > Right: > > > > So long as they don't overlap, that's not generally a problem. But > > > sure, for some complex shapes you'd need some new feature or other, > > > whether it's in shadows or path construction or elsewhere. > > In the case of a circle, if you wanted to draw the inner shadow over the > stroke and the fill, you'd have to create the path as just a fill with the > radius increased by half the line width. > > That seems like a heavy burden to place on the developer. Hopefully there are no round joins, endcaps or dashes. I think addPathByStrokingPath is almost useless. Those methods should all do unions...
Re: [whatwg] [canvas] inner shadows
On Sat, Nov 24, 2012 at 7:59 AM, Glenn Maynard wrote: > On Fri, Nov 23, 2012 at 11:11 PM, Rik Cabanier 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.
Re: [whatwg] [canvas] inner shadows
On Fri, Nov 23, 2012 at 11:11 PM, Rik Cabanier 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. (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.) -- Glenn Maynard
Re: [whatwg] [canvas] inner shadows
On Fri, 23 Nov 2012, Rik Cabanier wrote: > On Fri, Nov 23, 2012 at 8:58 PM, Ian Hickson wrote: > > On Fri, 23 Nov 2012, Rik Cabanier wrote: > > > > > > > > Turns out it's relatively easy to do today in canvas; after you've > > > > drawn your shape and filled it, just add the following code: > > > > > > > > c.save(); > > > > c.clip(); > > > > c.moveTo(0,0); > > > > c.lineTo(0,height); > > > > c.lineTo(width,height); > > > > c.lineTo(width,0); > > > > c.closePath(); > > > > c.shadowColor = 'black'; > > > > c.shadowBlur = 30; > > > > c.fill(); > > > > c.restore(); > > > > > > I don't think that will work. Shadows are calculated before clipping so > > > they don't follow the clipping path. > > > > What matters is how they're painted, and that does follow the clipping > > path, as far as I can tell (step 4 of the drawing model). > > What matters is the shape that is used to calculate the blur (step 1) In > your example, that shape is a rectangle-- No, no, the rectangle is just added to the existing path. The code snippet above comes _after_ you've drawn the shape. > > > Even if it was right, it would only apply to shapes and only if > > > those shapes didn't have strokes and were completely opaque. > > > > That's easy enough, though, you only need to make a shape that is what > > you want the inner shadow to go over, and then set the fill to black > > (or anything completely opaque). > > How about the strokes? The example in the OP didn't have them, but you'd have to include them in the fill area. With the new Path objects, you'd just use addPathByStrokingPath(), which would be relatively simple. > > It's even easier with the new Path primitives since you can construct > > a combined path by stroking them all into one. > > Unfortunately, the current path logic does not support unions. It just > does path accumulation which will not give you the desired result. So long as they don't overlap, that's not generally a problem. But sure, for some complex shapes you'd need some new feature or other, whether it's in shadows or path construction or elsewhere. -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] [canvas] inner shadows
On Fri, Nov 23, 2012 at 3:57 PM, Ian Hickson wrote: > On Fri, 23 Nov 2012, Ian Hickson wrote: > > On Fri, 21 Sep 2012, Tyler Larson wrote: > > > On Sep 20, 2012, at 6:49 PM, Ian Hickson wrote: > > > > Can't you do this using clip() easily enough? Maybe I'm missing > > > > something important here. Can you elaborate? > > > > > > Here is an example of what I am talking about. > > > http://i.imgur.com/Sy4xM.png > > > Clip would mask something but adding an inner shadow is different and > > > pretty difficult to reproduce when you take into account complex > shapes. > > > > Ah, yeah, I see what you mean. > > I was wrong, I didn't see what you mean. Turns out it's relatively easy to > do today in canvas; after you've drawn your shape and filled it, just add > the following code: > > c.save(); > c.clip(); > c.moveTo(0,0); > c.lineTo(0,height); > c.lineTo(width,height); > c.lineTo(width,0); > c.closePath(); > c.shadowColor = 'black'; > c.shadowBlur = 30; > c.fill(); > c.restore(); I don't think that will work. Shadows are calculated before clipping [1] so they don't follow the clipping path. Even if it was right, it would only apply to shapes and only if those shapes didn't have strokes and were completely opaque. 1: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#drawing-model
Re: [whatwg] [canvas] inner shadows
On Fri, Nov 23, 2012 at 8:58 PM, Ian Hickson wrote: > On Fri, 23 Nov 2012, Rik Cabanier wrote: > > > > > > Turns out it's relatively easy to do today in canvas; after you've > > > drawn your shape and filled it, just add the following code: > > > > > > c.save(); > > > c.clip(); > > > c.moveTo(0,0); > > > c.lineTo(0,height); > > > c.lineTo(width,height); > > > c.lineTo(width,0); > > > c.closePath(); > > > c.shadowColor = 'black'; > > > c.shadowBlur = 30; > > > c.fill(); > > > c.restore(); > > > > I don't think that will work. Shadows are calculated before clipping so > > they don't follow the clipping path. > > What matters is how they're painted, and that does follow the clipping > path, as far as I can tell (step 4 of the drawing model). > 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. > > > > Even if it was right, it would only apply to shapes and only if those > > shapes didn't have strokes and were completely opaque. > > That's easy enough, though, you only need to make a shape that is what you > want the inner shadow to go over, and then set the fill to black (or > anything completely opaque). How about the strokes? > It's even easier with the new Path primitives > since you can construct a combined path by stroking them all into one. > > Unfortunately, the current path logic does not support unions. It just does path accumulation which will not give you the desired result.
Re: [whatwg] [canvas] inner shadows
On Fri, 23 Nov 2012, Rik Cabanier wrote: > > > > Turns out it's relatively easy to do today in canvas; after you've > > drawn your shape and filled it, just add the following code: > > > > c.save(); > > c.clip(); > > c.moveTo(0,0); > > c.lineTo(0,height); > > c.lineTo(width,height); > > c.lineTo(width,0); > > c.closePath(); > > c.shadowColor = 'black'; > > c.shadowBlur = 30; > > c.fill(); > > c.restore(); > > I don't think that will work. Shadows are calculated before clipping so > they don't follow the clipping path. What matters is how they're painted, and that does follow the clipping path, as far as I can tell (step 4 of the drawing model). > Even if it was right, it would only apply to shapes and only if those > shapes didn't have strokes and were completely opaque. That's easy enough, though, you only need to make a shape that is what you want the inner shadow to go over, and then set the fill to black (or anything completely opaque). It's even easier with the new Path primitives since you can construct a combined path by stroking them all into one. -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] [canvas] inner shadows
On Fri, 23 Nov 2012, Rik Cabanier wrote: > On Fri, Nov 23, 2012 at 4:03 PM, Ian Hickson wrote: > > On Fri, 23 Nov 2012, Rik Cabanier wrote: > > > > > > It would still be quite complex to draw an inner shadow this way > > > because the blur is calculated on the inverse of the shape. A user > > > will need to draw to another canvas and then 'clear' it to get the > > > inverse. > > > > Turns out it's much easier than that; see my e-mail just now. > > No. You don't want to see a black shadow with blurred edges. For an > 'inner' shadow, the shadow image sits outside the shape so you have to > calculate that. I don't follow. Why would you see a black shadow? Do you have an example of what you mean? -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] [canvas] inner shadows
On Fri, Nov 23, 2012 at 4:03 PM, Ian Hickson wrote: > On Fri, 23 Nov 2012, Rik Cabanier wrote: > > > > It would still be quite complex to draw an inner shadow this way because > > the blur is calculated on the inverse of the shape. > > A user will need to draw to another canvas and then 'clear' it to get the > > inverse. > > Turns out it's much easier than that; see my e-mail just now. > No. You don't want to see a black shadow with blurred edges. For an 'inner' shadow, the shadow image sits outside the shape so you have to calculate that. > > > > > Is this something implementors would be interested in? > > > > It seems like this would be easy for them to implement... > > That's not really the question. :-) > > There's a cost to every feature. We have to prioritise. > > -- > Ian Hickson U+1047E)\._.,--,'``.fL > http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. > Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.' >
Re: [whatwg] [canvas] inner shadows
On Fri, 23 Nov 2012, Rik Cabanier wrote: > > It would still be quite complex to draw an inner shadow this way because > the blur is calculated on the inverse of the shape. > A user will need to draw to another canvas and then 'clear' it to get the > inverse. Turns out it's much easier than that; see my e-mail just now. > > Is this something implementors would be interested in? > > It seems like this would be easy for them to implement... That's not really the question. :-) There's a cost to every feature. We have to prioritise. -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] [canvas] inner shadows
On Fri, Nov 23, 2012 at 3:47 PM, Glenn Maynard wrote: > On Fri, Sep 21, 2012 at 7:49 PM, Rik Cabanier wrote: > >> 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 >> composited. >> > > Also, the blurred image's alpha is inverted. > > You're right. It's not 'clear' for the compositing more, but 'source-out'
Re: [whatwg] [canvas] inner shadows
On Fri, Sep 21, 2012 at 7:49 PM, Rik Cabanier wrote: > 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 > composited. > Also, the blurred image's alpha is inverted. -- Glenn Maynard
Re: [whatwg] [canvas] inner shadows
On Fri, 23 Nov 2012, Ian Hickson wrote: > On Fri, 21 Sep 2012, Tyler Larson wrote: > > On Sep 20, 2012, at 6:49 PM, Ian Hickson wrote: > > > Can't you do this using clip() easily enough? Maybe I'm missing > > > something important here. Can you elaborate? > > > > Here is an example of what I am talking about. > > http://i.imgur.com/Sy4xM.png > > Clip would mask something but adding an inner shadow is different and > > pretty difficult to reproduce when you take into account complex shapes. > > Ah, yeah, I see what you mean. I was wrong, I didn't see what you mean. Turns out it's relatively easy to do today in canvas; after you've drawn your shape and filled it, just add the following code: c.save(); c.clip(); c.moveTo(0,0); c.lineTo(0,height); c.lineTo(width,height); c.lineTo(width,0); c.closePath(); c.shadowColor = 'black'; c.shadowBlur = 30; c.fill(); c.restore(); -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] [canvas] inner shadows
On Nov 23, 2012, at 2:36 PM, Ian Hickson wrote: > On Fri, 21 Sep 2012, Tyler Larson wrote: >> On Sep 20, 2012, at 6:49 PM, Ian Hickson wrote: >>> Can't you do this using clip() easily enough? Maybe I'm missing >>> something important here. Can you elaborate? >> >> Here is an example of what I am talking about. >> http://i.imgur.com/Sy4xM.png >> Clip would mask something but adding an inner shadow is different and >> pretty difficult to reproduce when you take into account complex shapes. > > Ah, yeah, I see what you mean. The problem is that the canvas rendering > model always renders the shadow under the shape, and uses the shape's > alpha to work out where to paint the shape. > > What we could do is offer control that would change the shadows from > rendering under the shape to rendering over the shape, or, maybe even > better, have a mode that only renders the shadows. Then you could achieve > these effects relatively easily (by clipping to the shape so that the > shadow only renders inside the shape). Dependent if Canvas supports Filter Effects in the future or not (including SVG filters), the overlay shadow can be done with a combination of SourceAlpha and gaussian blur. There are already Canvas libraries that offer SVG Filters on Canvas. Greetings, Dirk > > Is this something implementors would be interested in? > > -- > Ian Hickson U+1047E)\._.,--,'``.fL > http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. > Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] [canvas] inner shadows
On Fri, Nov 23, 2012 at 2:36 PM, Ian Hickson wrote: > On Fri, 21 Sep 2012, Tyler Larson wrote: > > On Sep 20, 2012, at 6:49 PM, Ian Hickson wrote: > > > Can't you do this using clip() easily enough? Maybe I'm missing > > > something important here. Can you elaborate? > > > > Here is an example of what I am talking about. > > http://i.imgur.com/Sy4xM.png > > Clip would mask something but adding an inner shadow is different and > > pretty difficult to reproduce when you take into account complex shapes. > > Ah, yeah, I see what you mean. The problem is that the canvas rendering > model always renders the shadow under the shape, and uses the shape's > alpha to work out where to paint the shape. > > What we could do is offer control that would change the shadows from > rendering under the shape to rendering over the shape, or, maybe even > better, have a mode that only renders the shadows. Then you could achieve > these effects relatively easily (by clipping to the shape so that the > shadow only renders inside the shape). > It would still be quite complex to draw an inner shadow this way because the blur is calculated on the inverse of the shape. A user will need to draw to another canvas and then 'clear' it to get the inverse. However, I like the fact that this is a primitive that can be used to create other effects. > > Is this something implementors would be interested in? It seems like this would be easy for them to implement...
Re: [whatwg] [canvas] inner shadows
On Fri, 21 Sep 2012, Tyler Larson wrote: > On Sep 20, 2012, at 6:49 PM, Ian Hickson wrote: > > Can't you do this using clip() easily enough? Maybe I'm missing > > something important here. Can you elaborate? > > Here is an example of what I am talking about. > http://i.imgur.com/Sy4xM.png > Clip would mask something but adding an inner shadow is different and > pretty difficult to reproduce when you take into account complex shapes. Ah, yeah, I see what you mean. The problem is that the canvas rendering model always renders the shadow under the shape, and uses the shape's alpha to work out where to paint the shape. What we could do is offer control that would change the shadows from rendering under the shape to rendering over the shape, or, maybe even better, have a mode that only renders the shadows. Then you could achieve these effects relatively easily (by clipping to the shape so that the shadow only renders inside the shape). Is this something implementors would be interested in? -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] [canvas] inner shadows
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 composited. 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 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. `._.-(,_..'--(,_..'`-.;.' >
Re: [whatwg] [canvas] inner shadows
On Sep 20, 2012, at 6:49 PM, Ian Hickson wrote: > Can't you do this using clip() easily enough? Maybe I'm missing something > important here. Can you elaborate? Here is an example of what I am talking about. http://i.imgur.com/Sy4xM.png Clip would mask something but adding an inner shadow is different and pretty difficult to reproduce when you take into account complex shapes. -Tyler
Re: [whatwg] [canvas] inner shadows
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. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] [canvas] inner shadows
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
[whatwg] [canvas] inner shadows
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
