It would be nice to have a layer system built into the Canvas which would allow the following examples to work:
Have a "highlighter" on top on every other strokes
Creating a sophisticated drawing app
Integrating drawing in a game (multi-user drawing, ...)
Implementation
This should be rather simple.
The Canvas should have a prop specifying the layer, for simplicity, it would be a number, similar to how z-index works. The default would be 0.
In the renderer, we would concatenate all the paths and the depth will simply come from the inherent order of the paths and nothing else needs to be done (the only
PathType would have a layer attribute OR the paths should be grouped together in the same array (the first may be better for the end user, but the second one would make it simpler for the renderer and possibly more performant - worst case, there could be a conversion made from the second to the first one)
It would be nice to have a layer system built into the
Canvas
which would allow the following examples to work:Implementation
This should be rather simple.
Canvas
should have a prop specifying the layer, for simplicity, it would be a number, similar to howz-index
works. The default would be 0.PathType
would have alayer
attribute OR the paths should be grouped together in the same array (the first may be better for the end user, but the second one would make it simpler for the renderer and possibly more performant - worst case, there could be a conversion made from the second to the first one)OR