fix: Support for color texture in Canvas renderer, align with latest texture changes

Author: wouterlucas

src/core/Stage.ts

@@ -194,10 +194,7 @@ export class Stage {
     this.renderer = new renderEngine(rendererOptions);
     const renderMode = this.renderer.mode || 'webgl';
 
-    if (renderMode === 'webgl') {
-      this.createDefaultTexture();
-    }
-
+    this.createDefaultTexture();
     this.defShaderCtr = this.renderer.getDefShaderCtr();
     setPremultiplyMode(renderMode);
 

src/core/renderers/canvas/CanvasCoreRenderer.ts

@@ -22,7 +22,7 @@ import type { CoreNode } from '../../CoreNode.js';
 import type { CoreShaderManager } from '../../CoreShaderManager.js';
 import { getRgbaComponents, type RGBA } from '../../lib/utils.js';
 import { SubTexture } from '../../textures/SubTexture.js';
-import type { Texture } from '../../textures/Texture.js';
+import { TextureType, type Texture } from '../../textures/Texture.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
   CoreRenderer,
@@ -43,6 +43,7 @@ import {
   type IParsedColor,
 } from './internal/ColorUtils.js';
 import { UnsupportedShader } from './shaders/UnsupportedShader.js';
+import { assertTruthy } from '../../../utils.js';
 
 export class CanvasCoreRenderer extends CoreRenderer {
   private context: CanvasRenderingContext2D;
@@ -118,6 +119,17 @@ export class CanvasCoreRenderer extends CoreRenderer {
       | { x: number; y: number; width: number; height: number }
       | undefined;
 
+    const textureType = texture?.type;
+    assertTruthy(textureType, 'Texture type is not defined');
+
+    // The Canvas2D renderer only supports image and color textures
+    if (
+      textureType !== TextureType.image &&
+      textureType !== TextureType.color
+    ) {
+      return;
+    }
+
     if (texture) {
       if (texture instanceof SubTexture) {
         frame = texture.props;
@@ -126,11 +138,9 @@ export class CanvasCoreRenderer extends CoreRenderer {
 
       ctxTexture = texture.ctxTexture as CanvasCoreTexture;
       if (texture.state === 'freed') {
-        // we're going to batch the texture loading so we don't have to wait for
-        // ctxTexture.load();
         return;
       }
-      if (texture.state !== 'loaded' || !ctxTexture.hasImage()) {
+      if (texture.state !== 'loaded') {
         return;
       }
     }
@@ -175,7 +185,7 @@ export class CanvasCoreRenderer extends CoreRenderer {
       ctx.clip(path);
     }
 
-    if (ctxTexture) {
+    if (textureType === TextureType.image && ctxTexture) {
       const image = ctxTexture.getImage(color);
       ctx.globalAlpha = color.a ?? alpha;
       if (frame) {
@@ -199,7 +209,7 @@ export class CanvasCoreRenderer extends CoreRenderer {
         }
       }
       ctx.globalAlpha = 1;
-    } else if (hasGradient) {
+    } else if (textureType === TextureType.color && hasGradient) {
       let endX: number = tx;
       let endY: number = ty;
       let endColor: IParsedColor;
@@ -219,7 +229,7 @@ export class CanvasCoreRenderer extends CoreRenderer {
       gradient.addColorStop(1, formatRgba(endColor));
       ctx.fillStyle = gradient;
       ctx.fillRect(tx, ty, width, height);
-    } else {
+    } else if (textureType === TextureType.color) {
       ctx.fillStyle = formatRgba(color);
       ctx.fillRect(tx, ty, width, height);
     }

src/core/renderers/canvas/CanvasCoreTexture.ts

@@ -36,9 +36,6 @@ export class CanvasCoreTexture extends CoreContextTexture {
     | undefined;
 
   load(): void {
-    if (this.textureSource.state !== 'freed') {
-      return;
-    }
     this.textureSource.setCoreCtxState('loading');
 
     this.onLoadRequest()