CSS Shaders in Paint API?


Hello. Why in paint API just not use shaders, like in Shadertoy? For example --image will uniform sampler2D css_image. Any 2D position property will as vec2, any “translate, scale” will uniform matrix. And better base on WebGL 2. Also, geometry also should present as vec2. I think effect will better than just context 2D. I think no need meshes, etc. Need just shaders.


You brought this up earlier in the spec repository and it was explained to you. Allowing arbitrary shaders in the middle of the rendering pipeline is just too dangerous; it would need heavy validation/filtering that is much more complex than implementations are willing to deal with right now. This is precisely why the CSS Shaders spec was eventually abandoned.

(Shaders in WebGL are a different story - they can be run separately from the rest of the rendering pipeline and are thus much safer. That said, we still have to use an actively-maintained denylist for drivers and graphics cards that are too insecure to run arbitrary web content on, so a decent chunk of the populace simply can’t run WebGL applications. Giving CSS that same set of restrictions would be rather annoying, especially since you wouldn’t even have the easy ability to detect and fallback like raw JS does.)


But why no just make support for embeding canvas in background? Same as for <img> support (embed canvas). Why just no make conic gradients support for 2D canvas? Also I found issue with CSS content: how element will sized (how define intrinsic size)? Why just no make like this?

I suggest API: element.style.setPaintSource("--canvas", canvas)

And: background-image: var(--canvas);

I tried to make dynamic CSS images (include by named), but use canvas.toBlob very overheat CPU. So I think needs direct way.