[whatwg] Grouping in canvas 2d

[Rik Cabanier]

On Fri, Mar 14, 2014 at 11:09 AM, Ian Hickson <ian at hixie.ch> wrote:

> On Wed, 4 Dec 2013, Jürg Lehni wrote:
> >
> > Implementing [layering/grouping] would help us greatly to optimize
> > aspects of Paper.js, as double buffering into separate canvases is very
> > slow and costly.
>
> 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.
>

Let's say you're drawing a scene and there is a bunch of artwork that you
want to apply a multiply effect or opacity to.
With today's code, it would look something like this:

var bigcanvas = document.getElementById("c")l

var ctx = bigcanvas.getContext("2d");

ctx.moveto();.... // drawing underlying scene

var c = document.createElement("canvas");
ctx = c.getContext("2d");

ctx.moveto();.... // drawing scene that needs the effect

ctx = bigcanvas.getContext("2d");

ctx,globalAlpha(.5);

ctx.drawImage(c, 0, 0);

With layers, it would become:

var bigcanvas = document.getElementById("c")l
var ctx = bigcanvas.getContext("2d");
ctx.moveto();.... // drawing underlying scene

ctx,globalAlpha(.5);
ctx.beginLayer();
ctx.moveto();.... // drawing scene that needs the effect

ctx.endLayer();

So, with layers you
- avoid creating (expensive) DOM elements
- simplify the drawing (especially when there's a transformation)