1564784 - Canvas updated by offscreen canvas, can not be used as image source for another canvas

Status: VERIFIED FIXED

(Core :: Graphics: CanvasWebGL, defect, P3)

Description

[Erik De Rijcke]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

Steps to reproduce:

• Create canvas (1)
• Transfer control to offscreen canvas
• Use webgl in worker using offscreen canvas to update canvas (1)
• Create another canvas (2)
• Use canvas (1) to draw into canvas (2) using context 2d.

test program: https://jsfiddle.net/pm46knoc/

Actual results:

• Canvas (2) remains white
• Firefox tab frequently hard crashes

Expected results:

• Canvas (2) should have identical contents of canvas (1)

Comment 1

[Timothy Nikkel (:tnikkel)]

You also need to enabled the pref gfx.offscreencanvas.enabled to reproduce this.

Comment 2

[Erik De Rijcke]

(In reply to Timothy Nikkel (:tnikkel) from comment #1)

You also need to enabled the pref gfx.offscreencanvas.enabled to reproduce this.

If you can confirm this, does this mean the status can be set to CONFIRMED?

Comment 3

[guest271314]

Crashes tab at Nightly 72.0a1 (32-bit). Displays images then crashes tab at Firefox 70.0.1.

Related https://plnkr.co/edit/BU69GGcVUb8RULpsSmn3?p=preview

Comment 4

[guest271314]

Does not display image source at otherCanvas.

Comment 5

[guest271314]

A workaround for Firefox 70.0.1. Crashes tab at Nightly 72.0a1.

Substitute executing drawImage() with ImageBitmap of canvas within Worker onmessage handler for checkSize to avoid NS_ERROR_FAILURE

worker.onmessage = async _ => otherCtx.drawImage(await createImageBitmap(await (await fetch(canvas.toDataURL())).blob()), 0, 0)

within render after gl.commit(), self.postMessage(null) https://plnkr.co/edit/i8nSBaAKNwXsKSEIevJ5?p=preview

Comment 6

[guest271314]

Reproduced

• Canvas (2) remains white
• Firefox tab frequently hard crashes

at Firefox 70.0.1 and Nightly 72.0a1 (32-bit) *nix.

Chromium 80 outputs

• Canvas (2) should have identical contents of canvas (1)

Comment 7

[Andrew Osmond [:aosmond] (he/him)]

In Chrome, I can see this works. The part we are missing is being able to use in DrawImage (and CreateImageBitmap) an HTMLCanvasElement that has TransferControlToOffscreen called on it. It calls HTMLCanvasElement::GetSurfaceSnapshot which only returns something if it owns the context:

https://searchfox.org/mozilla-central/rev/b80b92e2e10299ab405bdc4eb5109e9e23e25160/dom/html/HTMLCanvasElement.cpp#1255

This shouldn't be that hard to pull the snapshot out via OffscreenCanvas::GetSurfaceSnapshot.

Comment 8

[Andrew Osmond [:aosmond] (he/him)]

There are wpt tests for this, but they only run on canvas 2d, not WebGL.

https://searchfox.org/mozilla-central/rev/125116c312b0a9c438d44e16011b116950caf17e/testing/web-platform/tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.html#20

Comment 9

[Andrew Osmond [:aosmond] (he/him)]

Attachment: Bug 1564784 - Allow drawing with HTMLCanvasElement paired with an OffscreenCanvas.

When CanvasRenderingContext2d.drawImage, or createImageBitmap are
called with an HTMLCanvasElement with an OffscreenCanvas gotten through
transferControlToOffscreen, we do not snapshot the underlying
OffscreenCanvas. This patch makes it so we do.

There are WPT tests for this, but they only run for canvas 2d.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/756eda9a06dc
Allow drawing with HTMLCanvasElement paired with an OffscreenCanvas. r=gfx-reviewers,kvark

Comment 11

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/756eda9a06dc

Comment 12

[Oana Botisan, Desktop QA]

I managed to reproduce the issue on Nightly from 2021-02-04 on macOS 10.15 by using the test program from comment 0.
I verified the fix using latest Nightly 98.0a1 and Firefox 97.0 on macOS 10.15, Ubuntu 18.04 x64 and Windows 10 x64. The issue is not reproducing anymore.