On Fri, Mar 14, 2014 at 11:09 AM, Ian Hickson <i...@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)