Fix loadImage SVG file loading regression

[gfrancine]

Resolves #8921

Changes:

• Load images with HTMLImageElement instead of createImageBitmap.

  Reverts to the loadImage implementation in p5.js <v2.0 (pre- commit e43f709, which introduced the regression).

createImageBitmap cannot load vector images and will reject with an InvalidStateError.

Further reading:

• https://issues.chromium.org/issues/40461578
• https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap
• https://forum.babylonjs.com/t/dynamic-svg-texture-loading-fails-using-webgpu-but-works-using-webgl/41091/3

PR Checklist

• npm run lint passes
• Inline reference is included / updated
• Unit tests are included / updated

[p5-bot]

Continuous Release

CDN link

• https://raw.esm.sh/pr/p5@2a9156d/lib/p5.min.js

Published Packages

• https://pkg.pr.new/p5@2a9156d

Commit hash: 772a542

Previous deployments

e0d378a

• https://raw.esm.sh/pr/p5@60291c1/lib/p5.min.js
• https://pkg.pr.new/p5@60291c1

b26caed

• https://raw.esm.sh/pr/p5@9107624/lib/p5.min.js
• https://pkg.pr.new/p5@9107624

---

This is an automated message.

[gfrancine]

Tiny important edit: the old implementation that loadImage was reverted to works by setting the Image src to the source path, which means the same image is loaded twice. Use the already-fetched image data instead (53b2068)

[ksen0]

Thank you for working on this!

[unit-tests (chrome)] test/unit/webgl/p5.Framebuffer.js > p5.Framebuffer > saveCanvas > should download a png file: test/unit/webgl/p5.Framebuffer.js#L681
AssertionError: expected "createElement" to be called with arguments: [ 'a' ]

Some tests are failing, could you take a look please?

[davepagurek]

@ksen0 that's the flaky test @perminder-17 was mentioning recently. I'll rerun the tests, it looks like the others worked

[davepagurek]

Looks good, thanks for the fix!