@lightningjs/renderer 3.0.0-beta8 → 3.0.0

package/{src/core/text-rendering/renderers/SdfTextRenderer/internal/constants.ts → dist/src/core/renderers/CoreShader.js}

@@ -1,32 +1,28 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Number of floating point numbers that represent a single glyph in the SDF vertex buffer.
- *
- * @remarks
- * The vertex buffer contains:
- *  - 6 vertex positions
- *  - 6 texture coordinates
- *  - = 12 positions/coordinates per glyph
- *
- * Each vertex position and texture coordinate consist of 2 floating point numbers (x/y).
- * So there are 12 * 2 = 24 floating point numbers that make up a single glyph.
- */
-export const FLOATS_PER_GLYPH = 24;
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export class CoreShader {
+    // abstract draw(): void;
+    static makeCacheKey(props) {
+        return false;
+    }
+    static resolveDefaults(props) {
+        return {};
+    }
+}
+//# sourceMappingURL=CoreShader.js.map

package/dist/src/core/renderers/CoreShader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreShader.js","sourceRoot":"","sources":["../../../../src/core/renderers/CoreShader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,MAAM,OAAgB,UAAU;IAC9B,yBAAyB;IACzB,MAAM,CAAC,YAAY,CAAC,KAA8B;QAChD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,CAAC,eAAe,CACpB,KAA8B;QAE9B,OAAO,EAAE,CAAC;IACZ,CAAC;CASF"}

package/dist/src/core/renderers/CoreShaderNode.d.ts

@@ -35,6 +35,11 @@ export interface CoreShaderType<Props extends object = any> {
      * used for making a cache key to check for reusability, currently only used for webgl ShaderTypes but might be needed for other types of renderer
      */
     getCacheMarkers?: (props: Props) => string;
+    /**
+     * timer that updates every loop, by default uses the stage elapsed time If you want to do a special calculation you can define a function.
+     * When you calculate your own value you can use the Stage timing values deltaTime, lastFrameTime, and currentFrameTime;
+     */
+    time?: boolean | ((stage: Stage) => number);
 }
 /**
  * CoreShaderNode is a base class that manages the shader prop values.
@@ -49,7 +54,12 @@ export declare class CoreShaderNode<Props extends object = Record<string, unknow
     readonly resolvedProps: Props | undefined;
     protected definedProps: Props | undefined;
     protected node: CoreNode | null;
+    readonly time: CoreShaderType['time'];
     update: (() => void) | undefined;
+    private _valueKeyCache;
+    private _valueKeyDirty;
+    private _lastW;
+    private _lastH;
     constructor(shaderKey: string, type: CoreShaderType<Props>, stage: Stage, props?: Props);
     private defineProps;
     attachNode(node: CoreNode): void;

package/dist/src/core/renderers/CoreShaderNode.js

@@ -42,11 +42,17 @@ export class CoreShaderNode {
     resolvedProps = undefined;
     definedProps = undefined;
     node = null;
+    time = undefined;
     update = undefined;
+    _valueKeyCache = '';
+    _valueKeyDirty = true;
+    _lastW = 0;
+    _lastH = 0;
     constructor(shaderKey, type, stage, props) {
         this.shaderKey = shaderKey;
         this.stage = stage;
         this.shaderType = type;
+        this.time = type.time;
         if (props !== undefined) {
             /**
              * props are already resolved by shadermanager
@@ -75,6 +81,7 @@ export class CoreShaderNode {
                     else {
                         this.resolvedProps[key] = value;
                     }
+                    this._valueKeyDirty = true;
                     if (this.update !== undefined && this.node !== null) {
                         this.node.setUpdateType(UpdateType.RecalcUniforms);
                     }
@@ -90,12 +97,22 @@ export class CoreShaderNode {
         this.node = node;
     }
     createValueKey() {
+        if (this._valueKeyDirty === false &&
+            this.node !== null &&
+            this.node.w === this._lastW &&
+            this.node.h === this._lastH) {
+            return this._valueKeyCache;
+        }
         let valueKey = '';
         for (const key in this.resolvedProps) {
             valueKey += `${key}:${this.resolvedProps[key]};`;
         }
-        valueKey += `node-width:${this.node.width}`;
-        valueKey += `node-height:${this.node.height}`;
+        valueKey += `node-width:${this.node.w}`;
+        valueKey += `node-height:${this.node.h}`;
+        this._valueKeyCache = valueKey;
+        this._valueKeyDirty = false;
+        this._lastW = this.node.w;
+        this._lastH = this.node.h;
         return valueKey;
     }
     get props() {

package/dist/src/core/renderers/CoreShaderNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoreShaderNode.js","sourceRoot":"","sources":["../../../../src/core/renderers/CoreShaderNode.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CoreShaderNode.js","sourceRoot":"","sources":["../../../../src/core/renderers/CoreShaderNode.ts"],"names":[],"mappings":"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"}

package/dist/src/core/renderers/canvas/CanvasCoreRenderer.d.ts

@@ -0,0 +1,33 @@
+import type { BaseShaderController } from '../../../main-api/ShaderController.js';
+import type { CoreNode } from '../../CoreNode.js';
+import type { CoreShaderManager } from '../../CoreShaderManager.js';
+import { type Texture } from '../../textures/Texture.js';
+import type { CoreContextTexture } from '../CoreContextTexture.js';
+import { CoreRenderer, type CoreRendererOptions, type QuadOptions } from '../CoreRenderer.js';
+export declare class CanvasCoreRenderer extends CoreRenderer {
+    private context;
+    private canvas;
+    private pixelRatio;
+    private clearColor;
+    renderToTextureActive: boolean;
+    activeRttNode: CoreNode | null;
+    private defShaderCtr;
+    constructor(options: CoreRendererOptions);
+    reset(): void;
+    render(): void;
+    addQuad(quad: QuadOptions): void;
+    createCtxTexture(textureSource: Texture): CoreContextTexture;
+    getShaderManager(): CoreShaderManager;
+    getDefShaderCtr(): BaseShaderController;
+    renderRTTNodes(): void;
+    removeRTTNode(node: CoreNode): void;
+    renderToTexture(node: CoreNode): void;
+    getBufferInfo(): null;
+    getQuadCount(): null;
+    /**
+     * Updates the clear color of the canvas renderer.
+     *
+     * @param color - The color to set as the clear color.
+     */
+    updateClearColor(color: number): void;
+}

package/dist/src/core/renderers/canvas/CanvasCoreRenderer.js

@@ -0,0 +1,250 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getRgbaComponents } from '../../lib/utils.js';
+import { SubTexture } from '../../textures/SubTexture.js';
+import { TextureType } from '../../textures/Texture.js';
+import { CoreRenderer, } from '../CoreRenderer.js';
+import { CanvasCoreTexture } from './CanvasCoreTexture.js';
+import { getBorder, getRadius, roundRect, strokeLine, } from './internal/C2DShaderUtils.js';
+import { formatRgba, parseColorRgba, parseColor, } from './internal/ColorUtils.js';
+import { UnsupportedShader } from './shaders/UnsupportedShader.js';
+import { assertTruthy } from '../../../utils.js';
+export class CanvasCoreRenderer extends CoreRenderer {
+    context;
+    canvas;
+    pixelRatio;
+    clearColor;
+    renderToTextureActive = false;
+    activeRttNode = null;
+    defShaderCtr;
+    constructor(options) {
+        super(options);
+        this.mode = 'canvas';
+        this.shManager.renderer = this;
+        const { canvas, pixelRatio, clearColor } = options;
+        this.canvas = canvas;
+        this.context = canvas.getContext('2d');
+        this.pixelRatio = pixelRatio;
+        this.clearColor = clearColor ? getRgbaComponents(clearColor) : undefined;
+        // Stub for default shader controller since the canvas renderer does not
+        // (really) support the concept of a shader (yet)
+        this.defShaderCtr = {
+            type: 'DefaultShader',
+            props: {},
+            shader: new UnsupportedShader('DefaultShader'),
+            getResolvedProps: () => () => {
+                return {};
+            },
+        };
+    }
+    reset() {
+        this.canvas.width = this.canvas.width; // quick reset canvas
+        const ctx = this.context;
+        if (this.clearColor) {
+            const [r, g, b, a] = this.clearColor;
+            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+            ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+        ctx.scale(this.pixelRatio, this.pixelRatio);
+    }
+    render() {
+        // noop
+    }
+    addQuad(quad) {
+        const ctx = this.context;
+        const { tx, ty, width, height, alpha, colorTl, colorTr, colorBr, ta, tb, tc, td, clippingRect, } = quad;
+        let texture = quad.texture;
+        let ctxTexture = undefined;
+        let frame;
+        const textureType = texture?.type;
+        assertTruthy(textureType, 'Texture type is not defined');
+        // The Canvas2D renderer only supports image and color textures and subTexture images
+        if (textureType !== TextureType.image &&
+            textureType !== TextureType.color &&
+            textureType !== TextureType.subTexture &&
+            textureType !== TextureType.noise) {
+            return;
+        }
+        if (texture) {
+            if (texture instanceof SubTexture) {
+                frame = texture.props;
+                texture = texture.parentTexture;
+            }
+            ctxTexture = texture.ctxTexture;
+            if (texture.state === 'freed') {
+                return;
+            }
+            if (texture.state !== 'loaded') {
+                return;
+            }
+        }
+        const color = parseColor(colorTl);
+        const hasTransform = ta !== 1;
+        const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
+        const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
+        const hasQuadShader = Boolean(quad.shader);
+        const radius = hasQuadShader ? getRadius(quad) : 0;
+        const border = hasQuadShader ? getBorder(quad) : undefined;
+        if (hasTransform || hasClipping || radius) {
+            ctx.save();
+        }
+        if (hasClipping) {
+            const path = new Path2D();
+            const { x, y, width, height } = clippingRect;
+            path.rect(x, y, width, height);
+            ctx.clip(path);
+        }
+        if (hasTransform) {
+            // Quad transform:
+            // | ta tb tx |
+            // | tc td ty |
+            // | 0  0  1  |
+            // C2D transform:
+            // | a  c  e  |
+            // | b  d  f  |
+            // | 0  0  1  |
+            const scale = this.pixelRatio;
+            ctx.setTransform(ta, tc, tb, td, tx * scale, ty * scale);
+            ctx.scale(scale, scale);
+            ctx.translate(-tx, -ty);
+        }
+        if (radius) {
+            const path = new Path2D();
+            roundRect.call(path, tx, ty, width, height, radius);
+            ctx.clip(path);
+        }
+        if ((textureType === TextureType.image ||
+            textureType === TextureType.subTexture ||
+            textureType === TextureType.noise) &&
+            ctxTexture) {
+            const image = ctxTexture.getImage(color);
+            ctx.globalAlpha = color.a ?? alpha;
+            if (frame) {
+                ctx.drawImage(image, frame.x, frame.y, frame.width, frame.height, tx, ty, width, height);
+            }
+            else {
+                try {
+                    ctx.drawImage(image, tx, ty, width, height);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                }
+                catch (error) {
+                    // noop
+                }
+            }
+            ctx.globalAlpha = 1;
+        }
+        else if (textureType === TextureType.color && hasGradient) {
+            let endX = tx;
+            let endY = ty;
+            let endColor;
+            if (colorTl === colorTr) {
+                // vertical
+                endX = tx;
+                endY = ty + height;
+                endColor = parseColor(colorBr);
+            }
+            else {
+                // horizontal
+                endX = tx + width;
+                endY = ty;
+                endColor = parseColor(colorTr);
+            }
+            const gradient = ctx.createLinearGradient(tx, ty, endX, endY);
+            gradient.addColorStop(0, formatRgba(color));
+            gradient.addColorStop(1, formatRgba(endColor));
+            ctx.fillStyle = gradient;
+            ctx.fillRect(tx, ty, width, height);
+        }
+        else if (textureType === TextureType.color) {
+            ctx.fillStyle = formatRgba(color);
+            ctx.fillRect(tx, ty, width, height);
+        }
+        if (border && border.width) {
+            const borderWidth = border.width;
+            const borderInnerWidth = border.width / 2;
+            const borderColor = formatRgba(parseColorRgba(border.color ?? 0));
+            ctx.beginPath();
+            ctx.lineWidth = borderWidth;
+            ctx.strokeStyle = borderColor;
+            ctx.globalAlpha = alpha;
+            if (radius) {
+                roundRect.call(ctx, tx + borderInnerWidth, ty + borderInnerWidth, width - borderWidth, height - borderWidth, radius);
+                ctx.stroke();
+            }
+            else {
+                ctx.strokeRect(tx + borderInnerWidth, ty + borderInnerWidth, width - borderWidth, height - borderWidth);
+            }
+            ctx.globalAlpha = 1;
+        }
+        else if (hasQuadShader) {
+            const borderTop = getBorder(quad, 'Top');
+            const borderRight = getBorder(quad, 'Right');
+            const borderBottom = getBorder(quad, 'Bottom');
+            const borderLeft = getBorder(quad, 'Left');
+            if (borderTop) {
+                strokeLine(ctx, tx, ty, width, height, borderTop.width, borderTop.color, 'Top');
+            }
+            if (borderRight) {
+                strokeLine(ctx, tx, ty, width, height, borderRight.width, borderRight.color, 'Right');
+            }
+            if (borderBottom) {
+                strokeLine(ctx, tx, ty, width, height, borderBottom.width, borderBottom.color, 'Bottom');
+            }
+            if (borderLeft) {
+                strokeLine(ctx, tx, ty, width, height, borderLeft.width, borderLeft.color, 'Left');
+            }
+        }
+        if (hasTransform || hasClipping || radius) {
+            ctx.restore();
+        }
+    }
+    createCtxTexture(textureSource) {
+        return new CanvasCoreTexture(this.txMemManager, textureSource);
+    }
+    getShaderManager() {
+        return this.shManager;
+    }
+    getDefShaderCtr() {
+        return this.defShaderCtr;
+    }
+    renderRTTNodes() {
+        // noop
+    }
+    removeRTTNode(node) {
+        // noop
+    }
+    renderToTexture(node) {
+        // noop
+    }
+    getBufferInfo() {
+        return null;
+    }
+    getQuadCount() {
+        return null;
+    }
+    /**
+     * Updates the clear color of the canvas renderer.
+     *
+     * @param color - The color to set as the clear color.
+     */
+    updateClearColor(color) {
+        this.clearColor = color ? getRgbaComponents(color) : undefined;
+    }
+}
+//# sourceMappingURL=CanvasCoreRenderer.js.map

package/dist/src/core/renderers/canvas/CanvasCoreRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasCoreRenderer.js","sourceRoot":"","sources":["../../../../../src/core/renderers/canvas/CanvasCoreRenderer.ts"],"names":[],"mappings":"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"}

package/dist/src/core/renderers/canvas/CanvasCoreTexture.d.ts

@@ -0,0 +1,17 @@
+import { CoreContextTexture } from '../CoreContextTexture.js';
+import { type IParsedColor } from './internal/ColorUtils.js';
+export declare class CanvasCoreTexture extends CoreContextTexture {
+    protected image: ImageBitmap | HTMLCanvasElement | HTMLImageElement | undefined;
+    protected tintCache: {
+        key: string;
+        image: HTMLCanvasElement;
+    } | undefined;
+    load(): Promise<void>;
+    release(): void;
+    free(): void;
+    updateMemSize(): void;
+    hasImage(): boolean;
+    getImage(color: IParsedColor): ImageBitmap | HTMLCanvasElement | HTMLImageElement;
+    protected tintTexture(source: ImageBitmap | HTMLCanvasElement | HTMLImageElement, color: string): HTMLCanvasElement;
+    private onLoadRequest;
+}

package/dist/src/core/renderers/canvas/CanvasCoreTexture.js

@@ -0,0 +1,125 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { assertTruthy } from '../../../utils.js';
+import { CoreContextTexture } from '../CoreContextTexture.js';
+import { formatRgba } from './internal/ColorUtils.js';
+export class CanvasCoreTexture extends CoreContextTexture {
+    image;
+    tintCache;
+    async load() {
+        this.textureSource.setState('loading');
+        try {
+            const size = await this.onLoadRequest();
+            this.textureSource.setState('loaded', size);
+            this.updateMemSize();
+        }
+        catch (err) {
+            this.textureSource.setState('failed', err);
+            throw err;
+        }
+    }
+    release() {
+        this.image = undefined;
+        this.tintCache = undefined;
+    }
+    free() {
+        this.release();
+        this.textureSource.setState('freed');
+        this.setTextureMemUse(0);
+        this.textureSource.freeTextureData();
+    }
+    updateMemSize() {
+        // Counting memory usage for:
+        // - main image
+        // - tinted image
+        const mult = this.tintCache ? 8 : 4;
+        if (this.textureSource.dimensions) {
+            const { width, height } = this.textureSource.dimensions;
+            this.setTextureMemUse(width * height * mult);
+        }
+    }
+    hasImage() {
+        return this.image !== undefined;
+    }
+    getImage(color) {
+        const image = this.image;
+        assertTruthy(image, 'Attempt to get unloaded image texture');
+        if (color.isWhite) {
+            if (this.tintCache) {
+                this.tintCache = undefined;
+                this.updateMemSize();
+            }
+            return image;
+        }
+        const key = formatRgba(color);
+        if (this.tintCache?.key === key) {
+            return this.tintCache.image;
+        }
+        const tintedImage = this.tintTexture(image, key);
+        this.tintCache = {
+            key,
+            image: tintedImage,
+        };
+        this.updateMemSize();
+        return tintedImage;
+    }
+    tintTexture(source, color) {
+        const { width, height } = source;
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            // fill with target color
+            ctx.fillStyle = color;
+            ctx.globalCompositeOperation = 'copy';
+            ctx.fillRect(0, 0, width, height);
+            // multiply with image, resulting in non-transparent tinted image
+            ctx.globalCompositeOperation = 'multiply';
+            ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+            // apply original image alpha
+            ctx.globalCompositeOperation = 'destination-in';
+            ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+        }
+        return canvas;
+    }
+    async onLoadRequest() {
+        assertTruthy(this.textureSource?.textureData?.data, 'Texture data is null');
+        const { data } = this.textureSource.textureData;
+        // TODO: canvas from text renderer should be able to provide the canvas directly
+        // instead of having to re-draw it into a new canvas...
+        if (data instanceof ImageData) {
+            const canvas = document.createElement('canvas');
+            canvas.width = data.width;
+            canvas.height = data.height;
+            const ctx = canvas.getContext('2d');
+            if (ctx)
+                ctx.putImageData(data, 0, 0);
+            this.image = canvas;
+            return { width: data.width, height: data.height };
+        }
+        else if ((typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) ||
+            data instanceof HTMLImageElement) {
+            this.image = data;
+            return { width: data.width, height: data.height };
+        }
+        return { width: 0, height: 0 };
+    }
+}
+//# sourceMappingURL=CanvasCoreTexture.js.map

package/dist/src/core/renderers/canvas/CanvasCoreTexture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasCoreTexture.js","sourceRoot":"","sources":["../../../../../src/core/renderers/canvas/CanvasCoreTexture.ts"],"names":[],"mappings":"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"}

package/dist/src/core/renderers/canvas/CanvasRenderer.d.ts

@@ -1,8 +1,9 @@
 import type { CoreNode } from '../../CoreNode.js';
 import { type Texture } from '../../textures/Texture.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
-import { CoreRenderer, type CoreRendererOptions, type QuadOptions } from '../CoreRenderer.js';
+import { CoreRenderer } from '../CoreRenderer.js';
 import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
+import type { Stage } from '../../Stage.js';
 export declare class CanvasRenderer extends CoreRenderer {
     private context;
     private canvas;
@@ -10,12 +11,11 @@ export declare class CanvasRenderer extends CoreRenderer {
     private clearColor;
     renderToTextureActive: boolean;
     activeRttNode: CoreNode | null;
-    private parsedColorCache;
-    constructor(options: CoreRendererOptions);
+    constructor(stage: Stage);
     reset(): void;
     render(): void;
-    addQuad(quad: QuadOptions): void;
-    renderContext(quad: QuadOptions): void;
+    addQuad(node: CoreNode): void;
+    renderContext(node: CoreNode, texture: Texture): void;
     createShaderNode(shaderKey: string, shaderType: Readonly<CanvasShaderType>, props?: Record<string, any>): CanvasShaderNode<Record<string, any>, Record<string, unknown>>;
     createShaderProgram(shaderConfig: any): null;
     supportsShaderType(shaderType: Readonly<CanvasShaderType>): boolean;
@@ -25,7 +25,6 @@ export declare class CanvasRenderer extends CoreRenderer {
     renderToTexture(node: CoreNode): void;
     getBufferInfo(): null;
     getQuadCount(): null;
-    getParsedColor(color: number, isRGBA?: boolean): string;
     /**
      * Updates the clear color of the canvas renderer.
      *