Closed Bug 1779227 Opened 3 months ago Closed 3 months ago

Canvas2d font API doesn't work on a disconnected element

Categories

(Core :: Graphics: Canvas2D, defect)

defect

Tracking

()

RESOLVED FIXED
104 Branch
Tracking Status
firefox104 --- fixed

People

(Reporter: jfkthame, Assigned: jfkthame)

References

()

Details

Attachments

(2 files)

CanvasRenderingContext2D::SetFontInternal returns an error if the canvas does not currently have a PresShell (e.g. because a canvas element has been created via script, and not [yet] added to the document). It should be possible to perform drawing operations on such a "disconnected" canvas, and in general this works, but trying to set the .font attribute throws an error.

See https://jsfiddle.net/rLy6hnf7/ for an example; it should show two copies of the same content, one drawn directly on an in-document <canvas> element, the other drawn on a disconnected canvas and then copied as a blob image.

The example works in Safari; in Chrome, it doesn't throw an error but the text fails to render in the second canvas. In Firefox, we throw an error on the font setter, so the second image doesn't appear at all.

Setting .font on a disconnected canvas element that has no PresShell/PresContext is similar to setting it on an offscreenCanvas, where these objects are not present. So I think we can handle this by pulling the version of SetFontInternal from OffscreenCanvasRenderingContext2D back into the base CanvasRenderingContext2D class, and adapting it slightly; instead of using this version only for offscreen-canvas, we'll use it any time there's no PresShell (instead of throwing an error, as CanvasRenderingContext2D::SetFontInternal currently does).

With this change, the jsfiddle example renders as expected.

Assignee: nobody → jfkthame
Status: NEW → ASSIGNED

Here's a simple reftest that fails before the patch here is landed. (The testcase completely fails to render.) It's somewhat fuzzy because we get different antialiasing (at least on Windows) between the blob-image rendering and the canvas that is directly in the document, but the differences are only in the gray levels of the edge pixels; the actual text is still correct.

Pushed by jkew@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/adb9c0a3c38f
Enable the font attribute to be set on a disconnected <canvas> element without throwing an error. r=aosmond
https://hg.mozilla.org/integration/autoland/rev/856332401a32
Add a WPT reftest. r=aosmond
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34825 for changes under testing/web-platform/tests
Regressions: 1779336
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → 104 Branch
Upstream PR merged by moz-wptsync-bot
You need to log in before you can comment on or make changes to this bug.