@lightningjs/renderer 3.0.0-beta20 → 3.0.0-beta21

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

@@ -22,9 +22,8 @@ import {
   CoreRenderer,
   type BufferInfo,
   type CoreRendererOptions,
-  type QuadOptions,
 } from '../CoreRenderer.js';
-import { WebGlRenderOp } from './WebGlRenderOp.js';
+import type { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
   createIndexBuffer,
@@ -47,7 +46,7 @@ import { compareRect, getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { WebGlShaderProgram } from './WebGlShaderProgram.js';
 import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { RenderTexture } from '../../textures/RenderTexture.js';
-import { CoreNodeRenderState, type CoreNode } from '../../CoreNode.js';
+import { CoreNodeRenderState, CoreNode } from '../../CoreNode.js';
 import { WebGlCtxRenderTexture } from './WebGlCtxRenderTexture.js';
 import { Default } from '../../shaders/webgl/Default.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
@@ -61,6 +60,8 @@ interface CoreWebGlSystem {
   extensions: CoreWebGlExtensions;
 }
 
+export type WebGlRenderOp = CoreNode | SdfRenderOp;
+
 export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
   glw: WebGlContextWrapper;
@@ -190,7 +191,9 @@ export class WebGlRenderer extends CoreRenderer {
     this.curRenderOp = null;
     this.renderOps.length = 0;
     glw.setScissorTest(false);
-    glw.clear();
+    if (this.stage.options.enableClear !== false) {
+      glw.clear();
+    }
   }
 
   createShaderProgram(
@@ -253,30 +256,36 @@ export class WebGlRenderer extends CoreRenderer {
    * Finally, it calculates the vertices for the quad, taking into account any transformations, and adds them to the quad buffer.
    * The function updates the length and number of quads in the current render operation, and updates the current buffer index.
    */
-  addQuad(params: QuadOptions) {
+  addQuad(node: CoreNode) {
     const f = this.fQuadBuffer;
     const u = this.uiQuadBuffer;
     let i = this.curBufferIdx;
 
-    const reuse = this.reuseRenderOp(params);
+    const reuse = this.reuseRenderOp(node);
     if (reuse === false) {
-      this.newRenderOp(params, i);
+      this.newRenderOp(node, i);
     }
 
-    let tx = params.texture!;
+    let tx = (node.props.texture || this.stage.defaultTexture) as Texture;
     if (tx.type === TextureType.subTexture) {
       tx = (tx as SubTexture).parentTexture;
     }
 
-    const tidx = this.addTexture(tx.ctxTexture as WebGlCtxTexture, i);
+    const texture = tx.ctxTexture as WebGlCtxTexture;
+    let tidx = this.curRenderOp!.addTexture(texture);
 
-    const rc = params.renderCoords!;
-    const tc = params.textureCoords!;
+    if (tidx === 0xffffffff) {
+      this.newRenderOp(node, i);
+      tidx = this.curRenderOp!.addTexture(texture);
+    }
 
-    const cTl = params.colorTl;
-    const cTr = params.colorTr;
-    const cBl = params.colorBl;
-    const cBr = params.colorBr;
+    const rc = node.renderCoords!;
+    const tc = node.textureCoords || this.defaultTextureCoords;
+
+    const cTl = node.premultipliedColorTl;
+    const cTr = node.premultipliedColorTr;
+    const cBl = node.premultipliedColorBl;
+    const cBr = node.premultipliedColorBr;
 
     // Upper-Left
     f[i] = rc.x1;
@@ -329,104 +338,73 @@ export class WebGlRenderer extends CoreRenderer {
    * @param shader
    * @param bufferIdx
    */
-  private newRenderOp(quad: QuadOptions | WebGlRenderOp, bufferIdx: number) {
-    const curRenderOp = new WebGlRenderOp(this, quad, bufferIdx);
+  private newRenderOp(node: CoreNode, bufferIdx: number) {
+    const curRenderOp = node;
+    curRenderOp.renderOpBufferIdx = bufferIdx;
+    curRenderOp.numQuads = 0;
+    curRenderOp.renderOpTextures.length = 0;
+
     this.curRenderOp = curRenderOp;
     this.renderOps.push(curRenderOp);
   }
 
-  /**
-   * Add a texture to the current RenderOp. If the texture cannot be added to the
-   * current RenderOp, a new RenderOp will be created and the texture will be added
-   * to that one.
-   *
-   * If the texture cannot be added to the new RenderOp, an error will be thrown.
-   *
-   * @param texture
-   * @param bufferIdx
-   * @param recursive
-   * @returns Assigned Texture Index of the texture in the render op
-   */
-  private addTexture(
-    texture: WebGlCtxTexture,
-    bufferIdx: number,
-    recursive?: boolean,
-  ): number {
-    const textureIdx = this.curRenderOp!.addTexture(texture);
-    // TODO: Refactor to be more DRY
-    if (textureIdx === 0xffffffff) {
-      if (recursive) {
-        throw new Error('Unable to add texture to render op');
-      }
-      this.newRenderOp(this.curRenderOp!, bufferIdx);
-      return this.addTexture(texture, bufferIdx, true);
-    }
-    return textureIdx;
-  }
-
   /**
    * Test if the current Render operation can be reused for the specified parameters.
    * @param params
    * @returns
    */
-  reuseRenderOp(params: QuadOptions): boolean {
-    // Switching shader program will require a new render operation
-    if (
-      this.curRenderOp?.shader.shaderKey !==
-      (params.shader as WebGlShaderNode).shaderKey
-    ) {
+  reuseRenderOp(node: CoreNode): boolean {
+    const curRenderOp = this.curRenderOp;
+    if (curRenderOp === null) {
+      return false;
+    }
+
+    const shader = node.props.shader as WebGlShaderNode;
+    const curShader = curRenderOp.shader as WebGlShaderNode;
+
+    if (curShader?.shaderKey !== shader?.shaderKey) {
       return false;
     }
 
     // Switching clipping rect will require a new render operation
-    if (
-      compareRect(this.curRenderOp.clippingRect, params.clippingRect) === false
-    ) {
+    if (compareRect(curRenderOp.clippingRect, node.clippingRect) === false) {
       return false;
     }
 
     // Force new render operation if rendering to texture is different
+    const curRtt = curRenderOp.rtt;
     if (
-      this.curRenderOp.parentHasRenderTexture !==
-        params.parentHasRenderTexture ||
-      this.curRenderOp.rtt !== params.rtt
+      curRenderOp.parentHasRenderTexture !== node.parentHasRenderTexture ||
+      curRtt !== (node.props.rtt === true)
     ) {
       return false;
     }
 
     if (
-      params.parentHasRenderTexture === true &&
-      this.curRenderOp.framebufferDimensions !== null &&
-      params.framebufferDimensions !== null
+      node.parentHasRenderTexture === true &&
+      node.parentFramebufferDimensions !== null
     ) {
+      const curFbDims = curRenderOp.isCoreNode
+        ? curRenderOp.parentFramebufferDimensions
+        : curRenderOp.framebufferDimensions;
       if (
-        this.curRenderOp.framebufferDimensions.w !==
-          params.framebufferDimensions.w ||
-        this.curRenderOp.framebufferDimensions.h !==
-          params.framebufferDimensions.h
+        curFbDims === null ||
+        curFbDims.w !== node.parentFramebufferDimensions.w ||
+        curFbDims.h !== node.parentFramebufferDimensions.h
       ) {
         return false;
       }
     }
 
-    if (
-      this.curRenderOp.shader.shaderKey === 'default' &&
-      params.shader?.shaderKey === 'default'
-    ) {
+    if (curShader?.shaderKey === 'default' && shader?.shaderKey === 'default') {
       return true;
     }
 
     // Check if the shader can batch the shader properties
-    if (
-      this.curRenderOp.shader.program.reuseRenderOp(
-        params,
-        this.curRenderOp,
-      ) === false
-    ) {
+    if (curShader?.program.reuseRenderOp(node, curRenderOp) === false) {
       return false;
     }
 
-    // Render operation can be reused
     return true;
   }
 
@@ -454,9 +432,9 @@ export class WebGlRenderer extends CoreRenderer {
     glw.arrayBufferData(buffer, arr, glw.STATIC_DRAW);
 
     for (let i = 0, length = this.renderOps.length; i < length; i++) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      this.renderOps[i]!.draw();
+      this.renderOps[i]!.draw(this);
     }
+
     this.quadBufferUsage = this.curBufferIdx * arr.BYTES_PER_ELEMENT;
 
     // Calculate the size of each quad in bytes (4 vertices per quad) times the size of each vertex in bytes

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

@@ -2,7 +2,6 @@ import type { CoreNode } from '../../CoreNode.js';
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Stage } from '../../Stage.js';
-import type { QuadOptions } from '../CoreRenderer.js';
 import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
 import type {
   UniformCollection,
@@ -10,8 +9,7 @@ import type {
   Vec3,
   Vec4,
 } from './internal/ShaderUtils.js';
-import type { WebGlRenderer } from './WebGlRenderer.js';
-import type { WebGlRenderOp } from './WebGlRenderOp.js';
+import type { WebGlRenderer, WebGlRenderOp } from './WebGlRenderer.js';
 import type { WebGlShaderProgram } from './WebGlShaderProgram.js';
 
 export type ShaderSource<T> =
@@ -47,10 +45,7 @@ export type WebGlShaderType<T extends object = Record<string, unknown>> =
      * This function is used to check if the shader can be reused based on quad info
      * @param props
      */
-    canBatch?: (
-      incomingQuad: QuadOptions,
-      currentRenderOp: WebGlRenderOp,
-    ) => boolean;
+    canBatch?: (node: CoreNode, currentRenderOp: WebGlRenderOp) => boolean;
     /**
      * extensions required for specific shader?
      */

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

@@ -18,12 +18,11 @@
  */
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { Default } from '../../shaders/webgl/Default.js';
-import type { QuadOptions } from '../CoreRenderer.js';
 import type { CoreShaderProgram } from '../CoreShaderProgram.js';
 import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import type { WebGlRenderOp } from './WebGlRenderOp.js';
-import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { WebGlRenderer, WebGlRenderOp } from './WebGlRenderer.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
+import { WebGlShaderNode } from './WebGlShaderNode.js';
 import type { BufferCollection } from './internal/BufferCollection.js';
 import {
   createProgram,
@@ -33,6 +32,7 @@ import {
   type UniformSet3Params,
   type UniformSet4Params,
 } from './internal/ShaderUtils.js';
+import { CoreNode } from '../../CoreNode.js';
 
 export class WebGlShaderProgram implements CoreShaderProgram {
   protected program: WebGLProgram | null;
@@ -146,43 +146,43 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
   }
 
-  reuseRenderOp(
-    incomingQuad: QuadOptions,
-    currentRenderOp: WebGlRenderOp,
-  ): boolean {
+  reuseRenderOp(node: CoreNode, currentRenderOp: WebGlRenderOp): boolean {
     if (this.lifecycle.canBatch !== undefined) {
-      return this.lifecycle.canBatch(incomingQuad, currentRenderOp);
+      return this.lifecycle.canBatch(node, currentRenderOp);
     }
 
+    const { time, worldAlpha, w, h } = node;
+
     if (this.useTimeValue === true) {
-      if (incomingQuad.time !== currentRenderOp.time) {
+      if (time !== currentRenderOp.time) {
         return false;
       }
     }
 
     if (this.useSystemAlpha === true) {
-      if (incomingQuad.alpha !== currentRenderOp.alpha) {
+      if (worldAlpha !== currentRenderOp.worldAlpha) {
         return false;
       }
     }
 
     if (this.useSystemDimensions === true) {
-      if (
-        incomingQuad.width !== currentRenderOp.width ||
-        incomingQuad.height !== currentRenderOp.height
-      ) {
+      if (w !== currentRenderOp.w || h !== currentRenderOp.h) {
         return false;
       }
     }
+
     let shaderPropsA: Record<string, unknown> | undefined = undefined;
     let shaderPropsB: Record<string, unknown> | undefined = undefined;
 
-    if (incomingQuad.shader !== null) {
-      shaderPropsA = incomingQuad.shader.resolvedProps;
+    const shader = node.props.shader;
+
+    if (shader !== null) {
+      shaderPropsA = (shader as WebGlShaderNode).resolvedProps;
     }
 
-    if (currentRenderOp.shader !== null) {
-      shaderPropsB = currentRenderOp.shader.resolvedProps;
+    const opShader = currentRenderOp.shader;
+    if (opShader !== null) {
+      shaderPropsB = (opShader as WebGlShaderNode).resolvedProps;
     }
 
     if (
@@ -204,10 +204,15 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   bindRenderOp(renderOp: WebGlRenderOp) {
-    this.bindBufferCollection(renderOp.buffers);
-    this.bindTextures(renderOp.textures);
+    const isCoreNode = renderOp.isCoreNode;
 
-    const { parentHasRenderTexture } = renderOp;
+    this.bindTextures(renderOp.renderOpTextures);
+    this.bindBufferCollection(renderOp.quadBufferCollection);
+
+    const parentHasRenderTexture = renderOp.parentHasRenderTexture;
+    const framebufferDimensions = isCoreNode
+      ? renderOp.parentFramebufferDimensions
+      : renderOp.framebufferDimensions;
 
     // Skip if the parent and current operation both have render textures
     if (renderOp.rtt === true && parentHasRenderTexture === true) {
@@ -216,8 +221,8 @@ export class WebGlShaderProgram implements CoreShaderProgram {
 
     // Bind render texture framebuffer dimensions as resolution
     // if the parent has a render texture
-    if (parentHasRenderTexture === true) {
-      const { w, h } = renderOp.framebufferDimensions!;
+    if (parentHasRenderTexture === true && framebufferDimensions) {
+      const { w, h } = framebufferDimensions;
       // Force pixel ratio to 1.0 for render textures since they are always 1:1
       // the final render texture will be rendered to the screen with the correct pixel ratio
       this.glw.uniform1f('u_pixelRatio', 1.0);
@@ -225,7 +230,8 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       // Set resolution to the framebuffer dimensions
       this.glw.uniform2f('u_resolution', w, h);
     } else {
-      this.glw.uniform1f('u_pixelRatio', renderOp.renderer.stage.pixelRatio);
+      this.glw.uniform1f('u_pixelRatio', renderOp.stage.pixelRatio);
+
       this.glw.uniform2f(
         'u_resolution',
         this.glw.canvas.width,
@@ -234,42 +240,46 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
 
     if (this.useTimeValue === true) {
-      this.glw.uniform1f('u_time', renderOp.time as number);
+      this.glw.uniform1f('u_time', renderOp.time);
     }
 
     if (this.useSystemAlpha === true) {
-      this.glw.uniform1f('u_alpha', renderOp.alpha);
+      this.glw.uniform1f('u_alpha', renderOp.worldAlpha);
     }
 
     if (this.useSystemDimensions === true) {
-      this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
+      this.glw.uniform2f('u_dimensions', renderOp.w, renderOp.h);
     }
 
     /**temporary fix to make sdf texts work */
-    if (renderOp.sdfShaderProps !== undefined) {
-      (renderOp.shader.shaderType as WebGlShaderType).onSdfBind?.call(
+    if (isCoreNode === false && renderOp.sdfShaderProps !== undefined) {
+      const opShader = renderOp.shader; // SdfRenderOp has .shader
+      (opShader.shaderType as WebGlShaderType).onSdfBind?.call(
         this.glw,
         renderOp.sdfShaderProps,
       );
       return;
     }
 
-    if (renderOp.shader.props !== undefined) {
+    const shader = renderOp.shader as WebGlShaderNode;
+    if (shader.props !== undefined) {
       /**
        * loop over all precalculated uniform types
        */
-      for (const key in renderOp.shader.uniforms.single) {
-        const { method, value } = renderOp.shader.uniforms.single[key]!;
+      const uniforms = shader.uniforms;
+
+      for (const key in uniforms.single) {
+        const { method, value } = uniforms.single[key]!;
         this.glw[method as keyof UniformSet1Param](key, value as never);
       }
 
-      for (const key in renderOp.shader.uniforms.vec2) {
-        const { method, value } = renderOp.shader.uniforms.vec2[key]!;
+      for (const key in uniforms.vec2) {
+        const { method, value } = uniforms.vec2[key]!;
         this.glw[method as keyof UniformSet2Params](key, value[0], value[1]);
       }
 
-      for (const key in renderOp.shader.uniforms.vec3) {
-        const { method, value } = renderOp.shader.uniforms.vec3[key]!;
+      for (const key in uniforms.vec3) {
+        const { method, value } = uniforms.vec3[key]!;
         this.glw[method as keyof UniformSet3Params](
           key,
           value[0],
@@ -278,8 +288,8 @@ export class WebGlShaderProgram implements CoreShaderProgram {
         );
       }
 
-      for (const key in renderOp.shader.uniforms.vec4) {
-        const { method, value } = renderOp.shader.uniforms.vec4[key]!;
+      for (const key in uniforms.vec4) {
+        const { method, value } = uniforms.vec4[key]!;
         this.glw[method as keyof UniformSet4Params](
           key,
           value[0],

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

@@ -23,12 +23,18 @@ import {
   BorderTemplate,
   type BorderProps,
 } from '../templates/BorderTemplate.js';
-import { strokeLine } from './utils/render.js';
 
 export interface ComputedBorderValues {
   borderColor: string;
   borderAsym: boolean;
-  borderRadius: Vec4;
+  innerX: number;
+  innerY: number;
+  innerW: number;
+  innerH: number;
+  outerX: number;
+  outerY: number;
+  outerW: number;
+  outerH: number;
 }
 
 export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
@@ -36,40 +42,91 @@ export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
   update() {
     this.computed.borderColor = formatRgba(parseColorRgba(this.props!.color));
     this.computed.borderAsym = !valuesAreEqual(this.props!.w as number[]);
-  },
-  render(ctx, quad, renderContext) {
-    renderContext();
-    ctx.strokeStyle = this.computed.borderColor!;
-    if (this.computed.borderAsym === false && this.props!.w[0] > 0) {
-      const bWidth = this.props!.w[0];
-      const bHalfWidth = bWidth * 0.5;
-      ctx.lineWidth = bWidth;
-      ctx.beginPath();
-      ctx.strokeRect(
-        quad.tx + bHalfWidth,
-        quad.ty + bHalfWidth,
-        quad.width - bWidth,
-        quad.height - bWidth,
-      );
+    const borderAlign = this.props!.align as number;
+    const borderGap = this.props!.gap as number;
+
+    const borderW = this.props!.w as Vec4;
+
+    if (this.computed.borderAsym === false) {
+      const bWidth = borderW[0] * 0.5;
+      //inside
+      const baseline = bWidth - borderW[0] * borderAlign - borderGap;
+      this.computed.outerX = baseline;
+      this.computed.outerY = baseline;
+
+      this.computed.outerW = -baseline * 2;
+      this.computed.outerH = -baseline * 2;
       return;
     }
 
-    const { 0: t, 1: r, 2: b, 3: l } = this.props!.w as Vec4;
-    if (t > 0) {
-      const y = quad.ty + t * 0.5;
-      strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, t);
-    }
+    // Calculate outer and inner rectangle dimensions
+    const [t, r, b, l] = this.props!.w as Vec4;
+
+    const outerX = (this.computed.outerX = -l * borderAlign - borderGap);
+    const outerY = (this.computed.outerY = -t * borderAlign - borderGap);
+    let outerW = 0;
+    let outerH = 0;
+
     if (r > 0) {
-      const x = quad.tx + quad.width - r * 0.5;
-      strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, r);
+      outerW += r * borderAlign + borderGap;
     }
+    if (l > 0) {
+      outerW += l * borderAlign + borderGap;
+    }
+
     if (b > 0) {
-      const y = quad.ty + quad.height - b * 0.5;
-      strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, b);
+      outerH += b * borderAlign + borderGap;
     }
-    if (l > 0) {
-      const x = quad.tx + l * 0.5;
-      strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, l);
+    if (t > 0) {
+      outerH += t * borderAlign + borderGap;
+    }
+
+    this.computed.outerW = outerW;
+    this.computed.outerH = outerH;
+
+    this.computed.innerX = outerX + l;
+    this.computed.innerY = outerY + t;
+    this.computed.innerW = outerW - l - r;
+    this.computed.innerH = outerH - t - b;
+  },
+  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(
+        tx + computed.outerX,
+        ty + computed.outerY,
+        w + computed.outerW,
+        h + computed.outerH,
+      );
+      return;
     }
+
+    // Calculate outer rectangle (including border)
+    const outerX = tx + computed.outerX;
+    const outerY = ty + computed.outerY;
+    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 = w + computed.innerW;
+    const innerH = h + computed.innerH;
+
+    // Use clip to subtract inner from outer
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(outerX, outerY, outerW, outerH);
+    ctx.rect(innerX, innerY, innerW, innerH);
+    ctx.clip('evenodd');
+    ctx.fillStyle = this.computed.borderColor!;
+    ctx.fillRect(outerX, outerY, outerW, outerH);
+    ctx.restore();
   },
 };

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

@@ -44,8 +44,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

@@ -51,14 +51,16 @@ export const LinearGradient: CanvasShaderType<
       colors: this.props!.colors.map((value) => 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;
@@ -66,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

@@ -56,12 +56,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) {
@@ -72,7 +74,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;
     }
 
@@ -87,12 +89,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();
   },