@solidtv/renderer 1.0.0 → 1.0.2

package/src/core/lib/utils.ts

@@ -63,8 +63,8 @@ export function getRgbaString(color: RGBA) {
 export interface Rect {
   x: number;
   y: number;
-  width: number;
-  height: number;
+  w: number;
+  h: number;
 }
 
 export interface RectWithValid extends Rect {
@@ -140,15 +140,15 @@ export function convertBoundToRect(bound: Bound, out?: Rect): Rect {
   if (out) {
     out.x = bound.x1;
     out.y = bound.y1;
-    out.width = bound.x2 - bound.x1;
-    out.height = bound.y2 - bound.y1;
+    out.w = bound.x2 - bound.x1;
+    out.h = bound.y2 - bound.y1;
     return out;
   }
   return {
     x: bound.x1,
     y: bound.y1,
-    width: bound.x2 - bound.x1,
-    height: bound.y2 - bound.y1,
+    w: bound.x2 - bound.x1,
+    h: bound.y2 - bound.y1,
   };
 }
 
@@ -161,35 +161,35 @@ export function intersectRect<T extends Rect = Rect>(
 export function intersectRect(a: Rect, b: Rect, out?: Rect): Rect {
   const x = Math.max(a.x, b.x);
   const y = Math.max(a.y, b.y);
-  const width = Math.min(a.x + a.width, b.x + b.width) - x;
-  const height = Math.min(a.y + a.height, b.y + b.height) - y;
-  if (width > 0 && height > 0) {
+  const w = Math.min(a.x + a.w, b.x + b.w) - x;
+  const h = Math.min(a.y + a.h, b.y + b.h) - y;
+  if (w > 0 && h > 0) {
     if (out) {
       out.x = x;
       out.y = y;
-      out.width = width;
-      out.height = height;
+      out.w = w;
+      out.h = h;
       return out;
     }
     return {
       x,
       y,
-      width,
-      height,
+      w,
+      h,
     };
   }
   if (out) {
     out.x = 0;
     out.y = 0;
-    out.width = 0;
-    out.height = 0;
+    out.w = 0;
+    out.h = 0;
     return out;
   }
   return {
     x: 0,
     y: 0,
-    width: 0,
-    height: 0,
+    w: 0,
+    h: 0,
   };
 }
 
@@ -199,15 +199,15 @@ export function copyRect(a: Rect, out?: Rect): Rect {
   if (out) {
     out.x = a.x;
     out.y = a.y;
-    out.width = a.width;
-    out.height = a.height;
+    out.w = a.w;
+    out.h = a.h;
     return out;
   }
   return {
     x: a.x,
     y: a.y,
-    width: a.width,
-    height: a.height,
+    w: a.w,
+    h: a.h,
   };
 }
 
@@ -218,9 +218,7 @@ export function compareRect(a: Rect | null, b: Rect | null): boolean {
   if (a === null || b === null) {
     return false;
   }
-  return (
-    a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
-  );
+  return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
 }
 
 export function boundInsideBound(bound1: Bound, bound2: Bound) {
@@ -250,7 +248,7 @@ export function isBoundPositive(bound: Bound): boolean {
 }
 
 export function isRectPositive(rect: Rect): boolean {
-  return rect.width > 0 && rect.height > 0;
+  return rect.w > 0 && rect.h > 0;
 }
 
 /**

package/src/core/renderers/CoreRenderer.ts

@@ -1,42 +1,11 @@
-import type { Dimensions } from '../../common/CommonTypes.js';
 import type { CoreNode } from '../CoreNode.js';
-import type { TextureOptions } from '../CoreTextureManager.js';
 import type { Stage } from '../Stage.js';
 import type { ContextSpy } from '../lib/ContextSpy.js';
-import type { RenderCoords } from '../lib/RenderCoords.js';
-import type { RectWithValid } from '../lib/utils.js';
 import type { CoreShaderProgram } from './CoreShaderProgram.js';
 import type { Texture, TextureCoords } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreShaderType, CoreShaderNode } from './CoreShaderNode.js';
 
-export interface QuadOptions {
-  width: number;
-  height: number;
-  colorTl: number;
-  colorTr: number;
-  colorBl: number;
-  colorBr: number;
-  texture: Texture | null;
-  textureOptions: TextureOptions | null;
-  textureCoords: TextureCoords | undefined;
-  zIndex: number;
-  shader: CoreShaderNode | null;
-  alpha: number;
-  clippingRect: RectWithValid;
-  tx: number;
-  ty: number;
-  ta: number;
-  tb: number;
-  tc: number;
-  td: number;
-  renderCoords?: RenderCoords;
-  rtt: boolean;
-  parentHasRenderTexture: boolean;
-  framebufferDimensions: Dimensions | null;
-  time?: number | null;
-}
-
 export interface CoreRendererOptions {
   stage: Stage;
   canvas: HTMLCanvasElement | OffscreenCanvas;

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

@@ -2,11 +2,7 @@ import type { CoreNode } from '../../CoreNode.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { TextureType, type Texture } from '../../textures/Texture.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
-import {
-  CoreRenderer,
-  type CoreRendererOptions,
-  type QuadOptions,
-} from '../CoreRenderer.js';
+import { CoreRenderer, type CoreRendererOptions } from '../CoreRenderer.js';
 import { CanvasTexture } from './CanvasTexture.js';
 import { parseColor } from '../../lib/colorParser.js';
 import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
@@ -52,7 +48,7 @@ export class CanvasRenderer extends CoreRenderer {
     const ctx = this.context;
     const { tx, ty, ta, tb, tc, td } = node.globalTransform!;
     const clippingRect = node.clippingRect;
-    let texture = node.renderTexture;
+    let texture = (node.props.texture || this.stage.defaultTexture) as Texture;
     // The Canvas2D renderer only supports image textures, no textures are used for color blocks
     if (texture !== null) {
       const textureType = texture.type;
@@ -67,7 +63,7 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     const hasTransform = ta !== 1;
-    const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
+    const hasClipping = clippingRect.w !== 0 && clippingRect.h !== 0;
     const shader = node.props.shader;
     const hasShader = shader !== null;
 
@@ -82,8 +78,8 @@ export class CanvasRenderer extends CoreRenderer {
 
     if (hasClipping === true) {
       const path = new Path2D();
-      const { x, y, width, height } = clippingRect;
-      path.rect(x, y, width, height);
+      const { x, y, w, h } = clippingRect;
+      path.rect(x, y, w, h);
       ctx.clip(path);
     }
 
@@ -104,40 +100,13 @@ export class CanvasRenderer extends CoreRenderer {
 
     if (hasShader === true) {
       let renderContext: (() => void) | null = () => {
-        this.renderContext(node);
-      };
-      const quad: QuadOptions = {
-        width: node.props.w,
-        height: node.props.h,
-        colorTl: node.premultipliedColorTl,
-        colorTr: node.premultipliedColorTr,
-        colorBl: node.premultipliedColorBl,
-        colorBr: node.premultipliedColorBr,
-        texture: texture,
-        textureOptions: node.props.textureOptions,
-        textureCoords: node.renderTextureCoords,
-        zIndex: node.zIndex, // zIndex usage?
-        shader: shader,
-        alpha: node.worldAlpha,
-        clippingRect: clippingRect,
-        tx,
-        ty,
-        ta,
-        tb,
-        tc,
-        td,
-        renderCoords: node.renderCoords,
-        rtt: node.props.rtt,
-        parentHasRenderTexture: node.parentHasRenderTexture,
-        framebufferDimensions: node.parentHasRenderTexture
-          ? node.parentFramebufferDimensions
-          : null,
+        this.renderContext(node, texture);
       };
 
-      (shader as CanvasShaderNode).render(ctx, quad, renderContext);
+      (shader as CanvasShaderNode).render(ctx, node, renderContext);
       renderContext = null;
     } else {
-      this.renderContext(node);
+      this.renderContext(node, texture);
     }
 
     if (saveAndRestore) {
@@ -145,9 +114,8 @@ export class CanvasRenderer extends CoreRenderer {
     }
   }
 
-  renderContext(node: CoreNode) {
+  renderContext(node: CoreNode, texture: Texture) {
     const color = node.premultipliedColorTl;
-    const texture = node.renderTexture!;
     const textureType = texture.type;
     const tx = node.globalTransform!.tx;
     const ty = node.globalTransform!.ty;
@@ -156,30 +124,57 @@ export class CanvasRenderer extends CoreRenderer {
 
     if (textureType !== TextureType.color) {
       const tintColor = parseColor(color);
-      if (textureType !== TextureType.subTexture) {
-        const image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
-        this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
-        this.context.drawImage(image, tx, ty, width, height);
-        this.context.globalAlpha = 1;
-        return;
+      let image: ImageBitmap | HTMLCanvasElement | HTMLImageElement;
+
+      if (textureType === TextureType.subTexture) {
+        image = (
+          (texture as SubTexture).parentTexture.ctxTexture as CanvasTexture
+        ).getImage(tintColor);
+      } else {
+        image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
       }
-      const image = (
-        (texture as SubTexture).parentTexture.ctxTexture as CanvasTexture
-      ).getImage(tintColor);
-      const props = (texture as SubTexture).props;
 
       this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
-      this.context.drawImage(
-        image,
-        props.x,
-        props.y,
-        props.w,
-        props.h,
-        tx,
-        ty,
-        width,
-        height,
-      );
+
+      const txCoords = node.textureCoords;
+      if (txCoords) {
+        const ix = image.width;
+        const iy = image.height;
+
+        let sx = txCoords.x1 * ix;
+        let sy = txCoords.y1 * iy;
+        let sw = (txCoords.x2 - txCoords.x1) * ix;
+        let sh = (txCoords.y2 - txCoords.y1) * iy;
+
+        let flipX = false;
+        let flipY = false;
+
+        if (sw < 0) {
+          flipX = true;
+          sx += sw;
+          sw = Math.abs(sw);
+        }
+        if (sh < 0) {
+          flipY = true;
+          sy += sh;
+          sh = Math.abs(sh);
+        }
+
+        if (flipX || flipY) {
+          this.context.save();
+          this.context.translate(
+            tx + (flipX ? width : 0),
+            ty + (flipY ? height : 0),
+          );
+          this.context.scale(flipX ? -1 : 1, flipY ? -1 : 1);
+          this.context.drawImage(image, sx, sy, sw, sh, 0, 0, width, height);
+          this.context.restore();
+        } else {
+          this.context.drawImage(image, sx, sy, sw, sh, tx, ty, width, height);
+        }
+      } else {
+        this.context.drawImage(image, tx, ty, width, height);
+      }
       this.context.globalAlpha = 1;
       return;
     }
@@ -201,8 +196,22 @@ export class CanvasRenderer extends CoreRenderer {
         endY = ty;
         endColor = node.premultipliedColorTr;
       }
+
+      let startColor = color;
+      const startAlpha = (startColor >>> 24) & 0xff;
+      const endAlpha = (endColor >>> 24) & 0xff;
+
+      // if one of the colors has 0 alpha, we want to match the RGB channels
+      // to the other color to prevent white bleed during zero alpha interpolation.
+      if (startAlpha === 0 && endAlpha > 0) {
+        startColor =
+          ((startColor & 0xff000000) | (endColor & 0x00ffffff)) >>> 0;
+      } else if (endAlpha === 0 && startAlpha > 0) {
+        endColor = ((endColor & 0xff000000) | (startColor & 0x00ffffff)) >>> 0;
+      }
+
       const gradient = this.context.createLinearGradient(tx, ty, endX, endY);
-      gradient.addColorStop(0, normalizeCanvasColor(color));
+      gradient.addColorStop(0, normalizeCanvasColor(startColor));
       gradient.addColorStop(1, normalizeCanvasColor(endColor));
       this.context.fillStyle = gradient;
       this.context.fillRect(tx, ty, width, height);
@@ -264,6 +273,92 @@ export class CanvasRenderer extends CoreRenderer {
     this.clearColor = normalizeCanvasColor(color);
   }
 
+  override getTextureCoords(
+    node: CoreNode,
+  ): import('../../textures/Texture.js').TextureCoords | undefined {
+    const texture = node.texture;
+    if (texture === null) {
+      return undefined;
+    }
+
+    const ctxTexture =
+      texture.type === TextureType.subTexture
+        ? (texture as SubTexture).parentTexture.ctxTexture
+        : texture.ctxTexture;
+    if (ctxTexture === undefined) {
+      return undefined;
+    }
+
+    const textureOptions = node.props.textureOptions;
+
+    // early exit for textures with no options unless its a subtexture
+    if (
+      texture.type !== TextureType.subTexture &&
+      textureOptions === undefined
+    ) {
+      return { x1: 0, y1: 0, x2: 1, y2: 1 };
+    }
+
+    let x1 = 0,
+      y1 = 0,
+      x2 = 1,
+      y2 = 1;
+    if (texture.type === TextureType.subTexture) {
+      const { w: parentW, h: parentH } = (texture as SubTexture).parentTexture
+        .dimensions!;
+      const { x, y, w, h } = (texture as SubTexture).props;
+      x1 = x / parentW;
+      y1 = y / parentH;
+      x2 = x1 + w / parentW;
+      y2 = y1 + h / parentH;
+    }
+
+    if (textureOptions !== undefined && textureOptions !== null) {
+      const resizeMode = textureOptions.resizeMode;
+      if (
+        resizeMode !== undefined &&
+        resizeMode.type === 'cover' &&
+        texture.dimensions !== null
+      ) {
+        const dimensions =
+          texture.dimensions as import('../../../common/CommonTypes.js').Dimensions;
+        const w = node.props.w;
+        const h = node.props.h;
+        const scaleX = w / dimensions.w;
+        const scaleY = h / dimensions.h;
+        const scale = Math.max(scaleX, scaleY);
+        const precision = 1 / scale;
+
+        // Determine based on width
+        if (scaleX < scale) {
+          const desiredSize = precision * node.props.w;
+          x1 = (1 - desiredSize / dimensions.w) * (resizeMode.clipX ?? 0.5);
+          x2 = x1 + desiredSize / dimensions.w;
+        }
+        // Determine based on height
+        if (scaleY < scale) {
+          const desiredSize = precision * node.props.h;
+          y1 = (1 - desiredSize / dimensions.h) * (resizeMode.clipY ?? 0.5);
+          y2 = y1 + desiredSize / dimensions.h;
+        }
+      }
+
+      if (textureOptions.flipX === true) {
+        [x1, x2] = [x2, x1];
+      }
+      if (textureOptions.flipY === true) {
+        [y1, y2] = [y2, y1];
+      }
+    }
+
+    return {
+      x1,
+      y1,
+      x2,
+      y2,
+    };
+  }
+
   override updateViewport(): void {
     // noop
   }

package/src/core/renderers/canvas/CanvasShaderNode.ts

@@ -1,7 +1,6 @@
 import type { CoreNode } from '../../CoreNode.js';
 import { normalizeCanvasColor } from '../../lib/colorCache.js';
 import type { Stage } from '../../Stage.js';
-import type { QuadOptions } from '../CoreRenderer.js';
 import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
 
 export type CanvasShaderType<
@@ -11,7 +10,7 @@ export type CanvasShaderType<
   render: (
     this: CanvasShaderNode<T, C>,
     ctx: CanvasRenderingContext2D,
-    quad: QuadOptions,
+    node: CoreNode,
     renderContext: () => void,
   ) => void;
   update?: (this: CanvasShaderNode<T, C>, node: CoreNode) => void;

package/src/core/renderers/webgl/SdfRenderOp.ts

@@ -33,10 +33,10 @@ export class SdfRenderOp extends CoreRenderOp {
     readonly renderer: WebGlRenderer,
     readonly shader: WebGlShaderNode,
     readonly quadBufferCollection: BufferCollection,
-    public worldAlpha: number,
-    public clippingRect: RectWithValid,
-    readonly width: number,
-    readonly height: number,
+    readonly worldAlpha: number,
+    readonly clippingRect: RectWithValid,
+    readonly w: number,
+    readonly h: number,
     readonly rtt: boolean,
     public parentHasRenderTexture: boolean,
     public framebufferDimensions: Dimensions | null,
@@ -70,8 +70,8 @@ export class SdfRenderOp extends CoreRenderOp {
       const pixelRatio =
         USE_RTT && this.parentHasRenderTexture ? 1 : stage.pixelRatio;
       const clipX = Math.round(this.clippingRect.x * pixelRatio);
-      const clipWidth = Math.round(this.clippingRect.width * pixelRatio);
-      const clipHeight = Math.round(this.clippingRect.height * pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.h * pixelRatio);
       let clipY = Math.round(
         options.canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
       );
@@ -79,7 +79,7 @@ export class SdfRenderOp extends CoreRenderOp {
       // to be relative to the parent's framebuffer
       if (USE_RTT && this.parentHasRenderTexture) {
         clipY = this.framebufferDimensions
-          ? this.framebufferDimensions.h - this.height
+          ? this.framebufferDimensions.h - this.h
           : 0;
       }
 

package/src/core/renderers/webgl/WebGlShaderProgram.ts

@@ -134,7 +134,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       return this.lifecycle.canBatch(node, currentRenderOp);
     }
 
-    const { time, worldAlpha, width, height } = node;
+    const { time, worldAlpha, w, h } = node;
 
     if (this.useTimeValue === true) {
       if (time !== currentRenderOp.time) {
@@ -149,10 +149,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
 
     if (this.useSystemDimensions === true) {
-      if (
-        width !== currentRenderOp.width ||
-        height !== currentRenderOp.height
-      ) {
+      if (w !== currentRenderOp.w || h !== currentRenderOp.h) {
         return false;
       }
     }
@@ -235,7 +232,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
 
     if (this.useSystemDimensions === true) {
-      this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
+      this.glw.uniform2f('u_dimensions', renderOp.w, renderOp.h);
     }
 
     const shader = renderOp.shader as WebGlShaderNode;

package/src/core/shaders/canvas/Border.ts

@@ -72,39 +72,35 @@ export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
     this.computed.innerW = outerW - l - r;
     this.computed.innerH = outerH - t - b;
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     renderContext();
     const computed = this.computed as ComputedBorderValues;
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
     ctx.strokeStyle = computed.borderColor!;
     if (computed.borderAsym === false && this.props!.w[0] > 0) {
       ctx.lineWidth = this.props!.w[0];
       ctx.beginPath();
       ctx.strokeRect(
-        quad.tx + computed.outerX,
-        quad.ty + computed.outerY,
-        quad.width + computed.outerW,
-        quad.height + computed.outerH,
+        tx + computed.outerX,
+        ty + computed.outerY,
+        w + computed.outerW,
+        h + computed.outerH,
       );
       return;
     }
 
-    // Pre-calculate common values
-    const tx = quad.tx;
-    const ty = quad.ty;
-    const width = quad.width;
-    const height = quad.height;
-
     // Calculate outer rectangle (including border)
     const outerX = tx + computed.outerX;
     const outerY = ty + computed.outerY;
-    const outerW = width + computed.outerW;
-    const outerH = height + computed.outerH;
+    const outerW = w + computed.outerW;
+    const outerH = h + computed.outerH;
 
     // Calculate inner rectangle (excluding border)
     const innerX = tx + computed.innerX;
     const innerY = ty + computed.innerY;
-    const innerW = width + computed.innerW;
-    const innerH = height + computed.innerH;
+    const innerW = w + computed.innerW;
+    const innerH = h + computed.innerH;
 
     // Use clip to subtract inner from outer
     ctx.save();

package/src/core/shaders/canvas/HolePunch.ts

@@ -27,8 +27,9 @@ export const HolePunch: CanvasShaderType<
     ctx.save();
     renderContext();
     const { x, y, w, h } = this.props!;
+    const gt = quad.globalTransform!;
     ctx.beginPath();
-    roundRect(ctx, quad.tx + x, quad.ty + y, w, h, this.computed.radius!);
+    roundRect(ctx, gt.tx + x, gt.ty + y, w, h, this.computed.radius!);
     ctx.closePath();
     ctx.fillStyle = 'black';
     ctx.globalCompositeOperation = 'destination-out';

package/src/core/shaders/canvas/LinearGradient.ts

@@ -31,17 +31,36 @@ export const LinearGradient: CanvasShaderType<
       y0: line * Math.sin(angle) + nHeight * 0.5,
       x1: line * Math.cos(angle + Math.PI) + nWidth * 0.5,
       y1: line * Math.sin(angle + Math.PI) + nHeight * 0.5,
-      colors: this.props!.colors.map((value) => this.toColorString(value)),
+      colors: this.props!.colors.map((value, i, arr) => {
+        const alpha = (value >>> 24) & 0xff;
+        if (alpha === 0) {
+          let nearestRGB = value & 0x00ffffff;
+          for (let step = 1; step < arr.length; step++) {
+            if (i - step >= 0 && ((arr[i - step]! >>> 24) & 0xff) > 0) {
+              nearestRGB = arr[i - step]! & 0x00ffffff;
+              break;
+            }
+            if (i + step < arr.length && ((arr[i + step]! >>> 24) & 0xff) > 0) {
+              nearestRGB = arr[i + step]! & 0x00ffffff;
+              break;
+            }
+          }
+          value = (value & 0xff000000) | nearestRGB;
+        }
+        return this.toColorString(value);
+      }),
     };
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     renderContext();
     const computed = this.computed as ComputedLinearGradientValues;
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
     const gradient = ctx.createLinearGradient(
-      quad.tx + computed.x0,
-      quad.ty + computed.y0,
-      quad.tx + computed.x1,
-      quad.ty + computed.y1,
+      tx + computed.x0,
+      ty + computed.y0,
+      tx + computed.x1,
+      ty + computed.y1,
     );
     const colors = computed.colors;
     const stops = this.props!.stops;
@@ -49,6 +68,6 @@ export const LinearGradient: CanvasShaderType<
       gradient.addColorStop(stops[i]!, colors[i]!);
     }
     ctx.fillStyle = gradient;
-    ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+    ctx.fillRect(tx, ty, w, h);
   },
 };

package/src/core/shaders/canvas/RadialGradient.ts

@@ -39,12 +39,14 @@ export const RadialGradient: CanvasShaderType<
       colors: props.colors.map((value) => this.toColorString(value)),
     };
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     renderContext();
     const { scaleX, scaleY, pivotX, pivotY, colors, size } = this
       .computed as ComputedRadialGradientValues;
-    let x = quad.tx + pivotX;
-    let y = quad.ty + pivotY;
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
+    let x = tx + pivotX;
+    let y = ty + pivotY;
     const stops = this.props!.stops;
 
     if (scaleX === scaleY) {
@@ -55,7 +57,7 @@ export const RadialGradient: CanvasShaderType<
       }
 
       ctx.fillStyle = gradient;
-      ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+      ctx.fillRect(tx, ty, w, h);
       return;
     }
 
@@ -70,12 +72,7 @@ export const RadialGradient: CanvasShaderType<
     }
 
     ctx.fillStyle = gradient;
-    ctx.fillRect(
-      quad.tx / scaleX,
-      quad.ty / scaleY,
-      quad.width / scaleX,
-      quad.height / scaleY,
-    );
+    ctx.fillRect(tx / scaleX, ty / scaleY, w / scaleX, h / scaleY);
 
     ctx.restore();
   },