From 7a0fafbe00c530cc547268f4856f5aa87b614dc7 Mon Sep 17 00:00:00 2001 From: wouterlucas Date: Wed, 18 Dec 2024 21:57:37 +0100 Subject: [PATCH] fix: Support for color texture in Canvas renderer, align with latest texture changes --- src/core/Stage.ts | 5 +--- .../renderers/canvas/CanvasCoreRenderer.ts | 24 +++++++++++++------ .../renderers/canvas/CanvasCoreTexture.ts | 3 --- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/core/Stage.ts b/src/core/Stage.ts index fa070c82..a3c09cb1 100644 --- a/src/core/Stage.ts +++ b/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); diff --git a/src/core/renderers/canvas/CanvasCoreRenderer.ts b/src/core/renderers/canvas/CanvasCoreRenderer.ts index 7fe4a98e..8d6f3a6f 100644 --- a/src/core/renderers/canvas/CanvasCoreRenderer.ts +++ b/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); } diff --git a/src/core/renderers/canvas/CanvasCoreTexture.ts b/src/core/renderers/canvas/CanvasCoreTexture.ts index b46b1b08..19c41125 100644 --- a/src/core/renderers/canvas/CanvasCoreTexture.ts +++ b/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()