- From: Rik Cabanier <cabanier@gmail.com>
- Date: Fri, 14 Mar 2014 14:08:12 -0700
- 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