fix: new Image texture on Canvas

Author: pecoram

src/core/renderers/canvas/CanvasCoreTexture.ts

@@ -23,7 +23,11 @@ import { CoreContextTexture } from '../CoreContextTexture.js';
 import { formatRgba, type IParsedColor } from './internal/ColorUtils.js';
 
 export class CanvasCoreTexture extends CoreContextTexture {
-  protected image: ImageBitmap | HTMLCanvasElement | undefined;
+  protected image:
+    | ImageBitmap
+    | HTMLCanvasElement
+    | HTMLImageElement
+    | undefined;
   protected tintCache:
     | {
         key: string;
@@ -68,7 +72,9 @@ export class CanvasCoreTexture extends CoreContextTexture {
     return this.image !== undefined;
   }
 
-  getImage(color: IParsedColor): ImageBitmap | HTMLCanvasElement {
+  getImage(
+    color: IParsedColor,
+  ): ImageBitmap | HTMLCanvasElement | HTMLImageElement {
     const image = this.image;
     assertTruthy(image, 'Attempt to get unloaded image texture');
 
@@ -94,7 +100,7 @@ export class CanvasCoreTexture extends CoreContextTexture {
   }
 
   protected tintTexture(
-    source: ImageBitmap | HTMLCanvasElement,
+    source: ImageBitmap | HTMLCanvasElement | HTMLImageElement,
     color: string,
   ) {
     const { width, height } = source;
@@ -138,6 +144,10 @@ export class CanvasCoreTexture extends CoreContextTexture {
       this.image = data;
       return { width: data.width, height: data.height };
     }
+    if (data instanceof HTMLImageElement) {
+      this.image = data;
+      return { width: data.width, height: data.height };
+    }
     return { width: 0, height: 0 };
   }
 }

src/core/textures/ImageTexture.ts

@@ -135,6 +135,10 @@ export class ImageTexture extends Texture {
   async loadImageFallback(src: string, hasAlpha: boolean) {
     const img = new Image();
 
+    if (!src.startsWith('data:')) {
+      img.crossOrigin = 'Anonymous';
+    }
+
     return new Promise<{ data: HTMLImageElement; premultiplyAlpha: boolean }>(
       (resolve) => {
         img.onload = () => {