[Webkit-unassigned] [Bug 267808] New: OffscreenCanvas rendered with ImageData on a Web Worker does not resize properly.

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=267808

            Bug ID: 267808
           Summary: OffscreenCanvas rendered with ImageData on a Web
                    Worker does not resize properly.
           Product: WebKit
           Version: Safari 16
          Hardware: Mac (Apple Silicon)
                OS: macOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Canvas
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: arhan.ch at gmail.com
                CC: dino at apple.com

Created attachment 469478

  --> https://bugs.webkit.org/attachment.cgi?id=469478&action=review

The code snippet running on my machine.

I've ran into a particular canvas rendering issue that only happens on Safari. Following is the code snippet that produces the behavior demonstrated in the attached video.

index.html

<canvas style="border: 15px solid red; width: 50vw;" width="512" height="256"></canvas>
<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.transferControlToOffscreen();
    const worker = new Worker('worker.js');
    worker.postMessage(ctx, [ctx]);
    self.onresize = () => {
        worker.postMessage(undefined);
    }
</script>


worker.js

self.onmessage = (e) => {
  let ctx = e.data.getContext("2d");
  self.onmessage = () => {
    const imageData = ctx.createImageData(512, 256);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      data[i] = 0;
      data[i + 1] = 0;
      data[i + 2] = 0;
      data[i + 3] = 255;
    }
    for (let i = 50; i < 120; i++) {
      for (let j = 50; j < 120; j++) {
        const index = (i + j * imageData.width) * 4;
        data[index] = 255;
        data[index + 1] = 0;
        data[index + 2] = 0;
        data[index + 3] = 255;
      }
    }
    ctx.putImageData(imageData, 0, 0);
  };
};

Some of my preliminary questions include: Why does the canvas image sometimes escape its content box and "move" to the border box? Why does the canvas image not scale with the rest of the content box? Does some sort of inner buffer data race condition cause the flashing? Could the culprit be the explicit width and height in ctx.createImageData(512, 256)?

>From my testing thus far, no similar derivative of this code causes the bug to occur. It only seems to happen under the following set of circumstances:
1. you are using safari
2. you are using a web worker to render an offscreen canvas
3. you are constantly updating the screen
4. you are rendering the canvas with ImageData
5. you are actively resizing the screen

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240120/b39abe8d/attachment.htm>