W3C home > Mailing lists > Public > public-canvas-api@w3.org > April to June 2013

Grouping in canvas 2d

From: Rik Cabanier <cabanier@gmail.com>
Date: Thu, 13 Jun 2013 20:57:03 -0700
Message-ID: <CAGN7qDAZbmCh-WqPKxQbk2NvUG1uBWJeeKrwfW--tjWKqtTkEQ@mail.gmail.com>
To: whatwg@whatwg.org, public-canvas-api@w3.org
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";
... // drawing

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
- creating lots of temporary canvas objects creates memory overhead
- is polyfillable for older canvas implementations

Received on Friday, 14 June 2013 03:57:30 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:31:55 UTC