[whatwg] Grouping in canvas 2d

[Jürg Lehni]

I am very much interested in this feature. Of course you can use separate canvases to achieve the same, which is what we currently do in Paper.js, but it appears to be rather slow to do so. I think performance could improve a lot which this alternative API proposal.

Jürg

On Jun 13, 2013, at 20:57 , Rik Cabanier <cabanier at gmail.com> wrote:

> Last year, I requested if grouping could be added to canvas.
> The API would look like this:
> 
> void beginLayer();
> void beginLayer(unsigned long x, unsigned long y, unsigned long w, unsigned
> long h);
> void endLayer();
> 
> 
> When you call beginLayer, you inherit everything from the graphics state
> except shadows, opacity and the current compositing mode. Those will reset
> to their initial value.
> At endLayer time, the graphics state will be restored and you will draw the
> content of the group.
> 
> so for instance, if you want multiply blend with opacity of .5
> 
> ctx.globalAlpha = .5;
> ctx.globalCompositeOperation = "multiply";
> ctx.beginLayer();
> ... // drawing
> ctx.endLayer();
> 
> This would cause everything between begin/endLayer to be drawn normally.
> This result is then blended and composited at endLayer time.
> 
> Last year, people argued that you could achieve the same effect by using a
> temporary canvas so this API is not really needed.
> I would like to see if people are more open to this API now.
> Reasons to have it:
> - it is easily achievable with existing graphics libraries.
> - it is a very common idiom. You can cut down on the amount of JS needed.
> - if you want to avoid antialiasing issue, you need to carefully set the
> CTM on the temporary canvas and remove the CTM from the current canvas
> - creating a temporary canvas has a higher overhead than simply starting a
> layer.
> - creating lots of temporary canvas objects creates memory overhead
> - is polyfillable for older canvas implementations
> 
> Rik