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.