W3C home > Mailing lists > Public > public-canvas-api@w3.org > April to June 2014

Re: [whatwg] Grouping in canvas 2d

From: Jürg Lehni <lists@scratchdisk.com>
Date: Mon, 7 Apr 2014 10:27:55 +0200
Cc: Ian Hickson <ian@hixie.ch>, Justin Novosad <junov@google.com>, WHAT Working Group <whatwg@whatwg.org>, "public-canvas-api@w3.org" <public-canvas-api@w3.org>, Brian Salomon <bsalomon@chromium.org>
Message-Id: <ECA74131-A87E-4E25-94C1-08A59F55395C@scratchdisk.com>
To: Rik Cabanier <cabanier@gmail.com>
Well this particular case, yes. But in the same way we allow a group of items to have an opacity applied to in Paper.js, and expect it to behave the same ways as in SVG: The group should appear as if its children were first rendered at 100% alpha and then blitted over with the desired transparency.

Layers would offer exactly this flexibility, and having them around would make a whole lot of sense, because currently the above can only be achieved by drawing into a separate canvas and blitting the result over. The performance of this is real low on all browsers, a true bottleneck in our library currently.

Jürg

On Apr 7, 2014, at 10:10 , Rik Cabanier <cabanier@gmail.com> wrote:

> 
> 
> 
> On Wed, Apr 2, 2014 at 11:21 PM, Jürg Lehni <lists@scratchdisk.com> wrote:
> Here another simple example:
> 
> When both filling and stroking a path and then drawing it with with an opacity of less than 100%, the path will be rendered differently than in an SVG (a large stroke width will make the issue more apparent):
> 
> - In Canvas, both the fill and the stroke will be rendered with the given opacity, and the fill will shine through the inner half of the stroke.
> 
> - In SVG, the stroke will cover the fill, and the fill will not shine through the inner half of the stroke, regardless of the opacity.
> 
> If you'd like to emulate the SVG behavior in Canvas (which we happen to do in Paper.js), then the only way to do so currently is to draw the path's fill and stroke at 100% opacity into a separate canvas, and then blit the whole thing over with the given opacity.
> 
> This is *much* slower than directly drawing into the Canvas, and happens to be one of the worst bottlenecks in Paper.js
> 
> I would really appreciate a solution to this problem.
> 
> Maybe this would better be solved by a function that does fill and stroke at the same time, for instance:
> void fillAndStroke(optional CanvasFillRule fillRule = "nonzero"); 
> void fillAndStroke(Path2D path, optional CanvasFillRule fillRule = "nonzero");
> 
> globalAlpha would then apply to the operation as a whole.
>  
> On Mar 14, 2014, at 19:09 , Ian Hickson <ian@hixie.ch> wrote:
> 
> > Can you elaborate on what precisely the performance bottleneck is? I was
> > looking through this thread but I can't find a description of the use
> > cases it addresses, so it's hard to evaluate the proposals.
> 
> 
Received on Monday, 7 April 2014 08:28:30 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:31:57 UTC