[whatwg] Grouping in canvas 2d

Rik Cabanier cabanier at gmail.com
Thu Jun 13 20:57:03 PDT 2013


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


More information about the whatwg mailing list