Stack Overflow
Stack Overflow

Questions tagged [css-paint-api]

For questions about the paint API introduced by CSS Houdini.

The CSS Painting API (a.k.a CSS paint API) gives web-developers access to the paint stage of CSS i.e, painting the background, content and highlight of CSS boxes.

This API introduces a new CSS function paint() and relies on the use of a dedicated Worklet (PaintWorklet) where the painting are registered and where the computation will be done. It also introduces a new Interface PaintRenderingContext2D which borrows some methods from the CanvasRenderingContext2d API.

W3C Candidate Recommendation specifications.

13 questions
4
votes
0 answers

How to just minify (and nothing else) a JS worklet file in webpack?

The JavaScript Worklet interface only accepts a file with an ES6 class as the argument to the Worklet.addModule method. I have an outside-of-webpack workaround to minify my CSS Paint worklet file and place it in my dist folder, but it makes…
James South
  • 534
  • 4
  • 15
4
votes
1 answer

Can the PaintWorklet be inlined?

The idiomatic way to use the CSS Paint API seems to be: Create a xyz.js file Populate with a class containing a paint(ctx, geom, properties) function Call registerPaint, passing the class as an argument Call CSS.paintWorklet.addModule('xyz.js')…
Matt Thomas
  • 5,279
  • 4
  • 27
  • 59
3
votes
1 answer

Can't pass extra args to CSS Houdini paint function?

I have a React/Electron app (with .scss files and CSS modules) where I'm trying to use CSS Houdini paint() function. I've successfully managed to call it, but it appears adding a second argument to paint() is causing it to…
IronWaffleMan
  • 2,513
  • 5
  • 30
  • 59
1
vote
2 answers

Can't import css houdini paint js file

I have a React/Electron app, where I'm trying to use the new CSS Houdini paint() function (as demonstrated in this page). In my project's index.html file I have added a script tag with the paintWorklet addModule() function as shown: