How to manipulate pixel data of CSS PaintWorklet context?

Question

Canvas' context supports createImageData and putImageData, however, context in paint worklet's paint method seems to not support those methods. I know that it doesn't allow reading pixel data from context as it is clearly stated in this document:

A paint worklet’s context is not 100% the same as a context. As of now, text rendering methods are missing and for security reasons you cannot read back pixels from the canvas.

I'm surprised, that it seems like one cannot write pixel to the canvas as well. Am I missing something or what?

Here's a codepen I made to demonstrate the issue - when I run it, Chrome prints Uncaught TypeError: ctx.createImageData is not a function in the console.

Answer 1

The current specs on the PaintRenderingContext2D have this note:

Note: The PaintRenderingContext2D implements a subset of the CanvasRenderingContext2D API. Specifically it doesn’t implement the CanvasImageData, CanvasUserInterface, CanvasText, or CanvasTextDrawingStyles APIs.

So it's not only the getImageData method that hasn't been implemented, but the whole CanvasImageData one, which includes

• createImageData
• getImageData
• putImageData

---

It's probably worth noting that the ImageData Interface is not even implemented on the paintWorkletGlobalScope API, nor is the ImageBitmap one, so we can not even do something like

const i_data = new ImageData(w, h);
// some pixel manips
createImageBitmap(i_data).then(img => {
  ctx.globalCompositeOperation = 'copy';
  ctx.drawImage(img,0,0);
});

even though it would have been a way to do what you wanted, without having the underlying problems induced by getImageData...