How can I pass images to a CSS Paint Worklet?

152 views Asked by At

I am trying to create a custom background for a h1-tag using the CSS Paint API. The background should be clipped to the text, so essentially I would like to 'color' it.

  • Unfortunatly '-webkit-canvas' was deprecated. A requirement is to actually use a h1 tag, and not just render text in a canvas and use composition modes.
  • I would like to pass in multiple images to draw with ctx.drawImage.

The spec is pretty clear on this:

CSS.registerProperty({
  name: '--my-image',
  syntax: '<image> | none',
  initialValue: 'none',
  inherits: false,
});

class MyWorklet {
  static get inputProperties() { 
    return ['--my-image']; 
  }

  paint(ctx, geom, properties) {
    const img = properties.get('--my-image');
    console.log(img);
    ctx.drawImage(img,10,10,150,180);    
  }
}
registerPaint('myworklet', MyWorklet);

However, Chromium has no support for this. The current workaround seems to be to pass the images through the background-image: , property. This will unfortunatly collide with registering the paint worklet as background-image (background-image: paint(worklet); background-clip: text;).

What are other ways to pass images into the paint worklet? Doesn't necessarily have to be through css variables. I am fine with hardcoding or importing images directly into the paint worklet.

0

There are 0 answers