W3C home > Mailing lists > Public > whatwg@whatwg.org > March 2014

Re: [whatwg] Grouping in canvas 2d

From: Rik Cabanier <cabanier@gmail.com>
Date: Fri, 14 Mar 2014 14:08:12 -0700
Message-ID: <CAGN7qDCvJRFToKcPuR9dnbPb-JN4wV554vVWBfsB0AGN0Lbi8g@mail.gmail.com>
To: Ian Hickson <ian@hixie.ch>
Cc: Justin Novosad <junov@google.com>, WHAT Working Group <whatwg@whatwg.org>, Jürg Lehni <lists@scratchdisk.com>, "public-canvas-api@w3.org" <public-canvas-api@w3.org>, Brian Salomon <bsalomon@chromium.org>
On Fri, Mar 14, 2014 at 11:09 AM, Ian Hickson <ian@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)
Received on Friday, 14 March 2014 21:08:38 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 17:00:17 UTC