drawImage Houdini CSS Paint API

Question

I am trying out Houdini's CSS Paint API on Chrome 70 and I can't this example to work: https://github.com/w3c/css-houdini-drafts/blob/master/css-paint-api/EXPLAINER.md#drawing-images

I am passing an Image via custom property like this:

--my-image: url("bridge.jpg");

and I use the CSS Properties and Values API Level (enabled via the Experimental Web Platform features flag) to register my image property:

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

Then I am trying to draw it in my worklet:

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);

for displaying the worklet I made a simple 500 * 500 div and added the style:

background-image: paint(myworklet);

The Console tells me that img is a CSSImageValue, so it seems to work in some way but the image does not get drawn onto the background of the div.

Has anyone managed to get this to work or are some functionalities which are required for this kind of stuff not yet implemented?

Answer 1

Image is not implemented in Chrome till now. Should be available in the latest Safari Technical Preview (v72). But it requires inline code, see https://vitaliy-bobrov.github.io/blog/trying-paint-wroklet-in-safari-tp/