Art gallery example canvas does not display correctly

[yenrenART]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

What specific section or headline is this issue about?

Art gallery example

What information was incorrect, unhelpful, or incomplete?

The resulting canvas does not display the example correctly.

What did you expect to see?

The canvas displaying images in frames.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/api/canvas_api/tutorial/using_images
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/canvas_api/tutorial/using_images/index.md
• Last commit: mdn/content@acfe8c9
• Document last modified: 2023-07-07T07:19:19.000Z

[caugner]

I can reproduce the issue. Here's how the Art gallery example looks like in Firefox:

When opening in the Playground, the gallery first looks the same:

But after pressing the "Run" button the gallery shows up correctly:

So I think this is a yari issue rather than a content issue, and I'm transferring the issue accordingly.

[mirunacurtean]

Update: This only seems to be an issue on Safari. I checked on the latest versions of Safari, FF and Chrome on the macOS, and on FF and Edge on Windows, and it is only on Safari that the canvas images are not loading.

Safari on macOS
https://github.com/user-attachments/assets/8fdb8397-a7bf-4ce6-9943-2bbaff04cbaa

Firefox on macOS
https://github.com/user-attachments/assets/a1ac9c9d-0a8e-4548-80e7-73299a8457a2

[mirunacurtean]

@yenrenART Please recheck, because I cannot reproduce the issue anymore.