Comments (2)
Layers are not only useful for filtering operations. They can also be used to apply blending to the result of a group of draw calls, or more generally apply composite operations to such group.
The canvas API is procedural, not declarative. It would be wasteful to have the JavaScript build a whole layer, just for it to be marked as hidden later. If a layer is to be hidden, it's better to simply not render it in the first place. Perhaps what you have in mind aligns with the Recorded Picture proposal (also called Display List). Display Lists would allow a group of draw calls to be replayed multiple times. Layers and Display Lists would be very different in terms of implementation, and in terms for their performance characteristics. We think that Layers and Display Lists provide solutions for two different problems and are both complementary. It would be a shame to impose the cost of building optimizing and caching display list if it's to be rasterized only once. We would rather have a high-performance code-path for single-use draw call group rasterizing, and another API focused on making draw calls rasterizable multiple times.
Does that make sense?
from canvas2d.
Hey @graveljp thanks for taking the time to write that up. That makes total sense on the reasoning for why it's designed the way it is. For actual layering I'd probably use multiple canvases stacked on top of each other.
I think my point is mostly about naming. Using the "layer" in the name is likely going to require every explanation of the concept to be prefaced by something like:
Note that the
beginLayer
/endLayer
methods don't deal with layers in the traditional graphics editor sense, but are instead used to compose blending modes and filters.
(If you search "html canvas layers" you'll see lots of results all trying to solve the familiar problem of layering with canvas.)
So I'd suggest using a different naming scheme that avoids that confusion. Something like beginComposition
, beginCompose
, beginBlend
, beginFilter
, or some other name I'm not knowledgeable enough to know of.
from canvas2d.
Related Issues (20)
- Serialization of CanvasFilters HOT 1
- CanvasFilters - Even <feImage>?
- CanvasFilters - How do we set the dimensions of the filter? HOT 3
- Reset / Clear
- Text Modifiers — Variable Fonts
- Color Input - P3 examples HOT 1
- Proposals HOT 11
- roundRect requiring an array HOT 6
- Make CSS filters work with `CanvasFilter` HOT 3
- Use GLES fragment shader as filters
- Gradient spread methods
- Arbitrary gradient transforms HOT 3
- Integer only coordinate space mode. HOT 7
- add clipRect() function HOT 2
- Web platform brianstorm meeting in California
- Make canvas2d faster than Webgl
- [Mesh2D] Triangle order HOT 2
- drawImageBatch can not be easily batched with some globalCompositeOperation modes HOT 1
- roundRect might be better as an extension to CanvasPath mixin HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from canvas2d.