@solidtv/renderer 1.5.5 → 1.6.0

package/src/core/platforms/web/WebPlatform.loopError.test.ts

@@ -0,0 +1,145 @@
+/**
+ * Tests the `handleLoopError` escape hatch: a synchronous throw inside a frame
+ * (event subscriber, animation step, draw) must never propagate out of the
+ * `requestAnimationFrame` callback and freeze the loop. By default the error is
+ * swallowed and the loop keeps running; a registered handler is invoked with the
+ * error and the loop still survives.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { WebPlatform } from './WebPlatform.js';
+import type { Stage } from '../../Stage.js';
+
+interface MakeStageOptions {
+  idle?: boolean;
+  handleLoopError?: (error: unknown) => void;
+  throwIn?: 'drawFrame' | 'emitIdle';
+  error?: unknown;
+}
+
+function makeStage(opts: MakeStageOptions = {}) {
+  const idle = opts.idle ?? false;
+  const error = opts.error ?? new Error('frame boom');
+
+  const drawFrame = vi.fn(() => {
+    if (opts.throwIn === 'drawFrame') {
+      throw error;
+    }
+  });
+  const emit = vi.fn(() => {
+    if (opts.throwIn === 'emitIdle') {
+      throw error;
+    }
+  });
+
+  const stage = {
+    isContextLost: false,
+    targetFrameTime: 0,
+    updateFrameTime: vi.fn(),
+    updateAnimations: vi.fn(() => false),
+    hasSceneUpdates: vi.fn(() => !idle),
+    calculateFps: vi.fn(),
+    drawFrame,
+    flushFrameEvents: vi.fn(),
+    shManager: { cleanup: vi.fn() },
+    cleanupTextRenderers: vi.fn(),
+    eventBus: { emit },
+    txMemManager: {
+      checkCleanup: vi.fn(() => false),
+      cleanup: vi.fn(),
+      handleOutOfMemory: vi.fn(),
+    },
+    renderer: { checkForOutOfMemory: vi.fn(() => false) },
+    options: { handleLoopError: opts.handleLoopError },
+  } as unknown as Stage;
+
+  return { stage, drawFrame, emit };
+}
+
+describe('WebPlatform render loop — handleLoopError escape hatch', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  // Stubs raf/setTimeout, starts the loop, and returns a `runFrame` that drives
+  // exactly one frame plus the raf/setTimeout call counts so far.
+  function harness(stage: Stage) {
+    let capturedLoop: ((t?: number) => void) | null = null;
+    const raf = vi.fn((cb: (t?: number) => void) => {
+      capturedLoop = cb;
+      return 1;
+    });
+    const timeout = vi.fn(() => 1 as unknown as ReturnType<typeof setTimeout>);
+    vi.stubGlobal('requestAnimationFrame', raf);
+    vi.stubGlobal('setTimeout', timeout);
+
+    new WebPlatform().startLoop(stage);
+
+    return {
+      runFrame: () => capturedLoop!(0),
+      rafCount: () => raf.mock.calls.length,
+      timeoutCount: () => timeout.mock.calls.length,
+    };
+  }
+
+  it('routes an active-frame error to the handler and keeps the loop alive', () => {
+    const error = new Error('draw boom');
+    const handleLoopError = vi.fn();
+    const { stage } = makeStage({
+      throwIn: 'drawFrame',
+      error,
+      handleLoopError,
+    });
+
+    const h = harness(stage);
+    expect(h.rafCount()).toBe(1); // initial schedule from startLoop
+
+    expect(() => h.runFrame()).not.toThrow();
+
+    expect(handleLoopError).toHaveBeenCalledTimes(1);
+    expect(handleLoopError).toHaveBeenCalledWith(error);
+    expect(h.rafCount()).toBe(2); // rescheduled the next frame
+  });
+
+  it('swallows the error and keeps the loop alive when no handler is registered', () => {
+    const error = new Error('draw boom');
+    const { stage } = makeStage({ throwIn: 'drawFrame', error });
+
+    const h = harness(stage);
+
+    // Default behaviour: the error is swallowed, never propagated, and the loop
+    // reschedules so the app does not freeze.
+    expect(() => h.runFrame()).not.toThrow();
+    expect(h.rafCount()).toBe(2); // rescheduled despite the error
+  });
+
+  it('does not double-schedule when an idle-path error follows the idle reschedule', () => {
+    const handleLoopError = vi.fn();
+    const { stage } = makeStage({
+      idle: true,
+      throwIn: 'emitIdle',
+      handleLoopError,
+    });
+
+    const h = harness(stage);
+
+    expect(() => h.runFrame()).not.toThrow();
+
+    expect(handleLoopError).toHaveBeenCalledTimes(1);
+    // The idle path already queued the next tick via setTimeout before the throw,
+    // so the catch must NOT queue an extra rAF.
+    expect(h.timeoutCount()).toBe(1);
+    expect(h.rafCount()).toBe(1);
+  });
+
+  it('does not touch the handler on a clean frame and reschedules normally', () => {
+    const handleLoopError = vi.fn();
+    const { stage, drawFrame } = makeStage({ handleLoopError });
+
+    const h = harness(stage);
+    h.runFrame();
+
+    expect(handleLoopError).not.toHaveBeenCalled();
+    expect(drawFrame).toHaveBeenCalledTimes(1);
+    expect(h.rafCount()).toBe(2);
+  });
+});

package/src/core/platforms/web/WebPlatform.ts

@@ -29,9 +29,24 @@ export class WebPlatform extends Platform {
   override startLoop(stage: Stage): void {
     let isIdle = false;
     let lastFrameTime = 0;
+    // Set by `tick` once it has queued the next frame; read by `runLoop`'s catch
+    // so a throw after scheduling never double-schedules (which would compound
+    // into runaway frames if it threw every frame). Reset at the top of each frame.
+    let scheduled = false;
     const buffer = 4;
 
-    const runLoop = (currentTime: number = 0) => {
+    const requestLoop = () => requestAnimationFrame(runLoop);
+
+    // All per-frame work lives in `tick`, deliberately split out of `runLoop`.
+    // `runLoop` carries the try/catch that keeps the loop alive, and some
+    // optimizing compilers — notably Chrome 38's Crankshaft, our language floor —
+    // refuse to optimize any function that contains a try/catch. Keeping that
+    // guard in a near-empty shell confines the de-opt to the shell: every hot
+    // operation (the `stage.*` calls below, run every frame) stays in fully
+    // optimizable functions. `tick` is also where all client-supplied code runs
+    // (synchronous event subscribers, the events drained by `flushFrameEvents`,
+    // and animation steps) — i.e. everything that can actually throw.
+    const tick = (currentTime: number) => {
       // The GL context is lost and the engine does not rebuild it in place.
       // Stop the loop entirely (no reschedule) so we issue no GL calls against
       // a dead context. Recovery is via app reload (see the `contextLost` event).
@@ -55,6 +70,7 @@ export class WebPlatform extends Platform {
           } else {
             requestAnimationFrame(runLoop);
           }
+          scheduled = true;
           return;
         }
 
@@ -75,6 +91,7 @@ export class WebPlatform extends Platform {
         // This ensures we wake up slightly before the next frame to check for updates,
         // preventing us from missing a frame due to timer variances.
         setTimeout(requestLoop, Math.max(targetFrameTime, 15));
+        scheduled = true;
 
         if (isIdle === false) {
           // The render burst has settled. Probe for a GPU out-of-memory now
@@ -105,9 +122,29 @@ export class WebPlatform extends Platform {
 
       // Schedule next frame
       requestAnimationFrame(runLoop);
+      scheduled = true;
     };
 
-    const requestLoop = () => requestAnimationFrame(runLoop);
+    const runLoop = (currentTime: number = 0) => {
+      // `tick` runs client-supplied code every frame; a throw there would
+      // otherwise propagate out of the rAF callback and permanently stop the
+      // render loop — the whole app freezes until reload. Guard it and always
+      // keep the loop alive: hand the error to `handleLoopError` (a no-op by
+      // default; the app can override it to log/report) and reschedule unless
+      // `tick` already queued the next frame before throwing.
+      scheduled = false;
+      try {
+        tick(currentTime);
+      } catch (error: unknown) {
+        const handleLoopError = stage.options.handleLoopError;
+        if (handleLoopError !== undefined) {
+          handleLoopError(error);
+        }
+        if (scheduled === false) {
+          requestAnimationFrame(runLoop);
+        }
+      }
+    };
 
     requestAnimationFrame(runLoop);
   }

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

@@ -33,6 +33,236 @@ describe('CanvasRenderer.renderContext', () => {
   });
 });
 
+describe('CanvasRenderer.addQuad transform detection', () => {
+  const makeRenderer = () => {
+    const renderer = Object.create(CanvasRenderer.prototype) as CanvasRenderer;
+    const context = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      setTransform: vi.fn(),
+      scale: vi.fn(),
+      translate: vi.fn(),
+      fillRect: vi.fn(),
+      clip: vi.fn(),
+      fillStyle: '',
+      globalAlpha: 1,
+    };
+    (renderer as any).context = context;
+    (renderer as any).pixelRatio = 1;
+    (renderer as any).stage = { defaultTexture: null };
+    return { renderer, context };
+  };
+
+  const makeColorNode = (transform: {
+    tx: number;
+    ty: number;
+    ta: number;
+    tb: number;
+    tc: number;
+    td: number;
+  }) =>
+    ({
+      globalTransform: transform,
+      clippingRect: { valid: false, x: 0, y: 0, w: 0, h: 0 },
+      placeholderActive: false,
+      premultipliedColorTl: 0xff0000ff,
+      premultipliedColorTr: 0xff0000ff,
+      premultipliedColorBr: 0xff0000ff,
+      worldAlpha: 1,
+      props: {
+        texture: { type: TextureType.color },
+        shader: null,
+        w: 100,
+        h: 50,
+      },
+    } as any);
+
+  it('applies the transform for a scaleY-only transform (td !== 1)', () => {
+    const { renderer, context } = makeRenderer();
+    const node = makeColorNode({ tx: 5, ty: 10, ta: 1, tb: 0, tc: 0, td: 2 });
+
+    renderer.addQuad(node);
+
+    expect(context.setTransform).toHaveBeenCalledWith(1, 0, 0, 2, 5, 10);
+    expect(context.save).toHaveBeenCalledTimes(1);
+    expect(context.restore).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies the transform for a rotation-only transform (tb/tc !== 0)', () => {
+    const { renderer, context } = makeRenderer();
+    const node = makeColorNode({ tx: 0, ty: 0, ta: 1, tb: -1, tc: 1, td: 1 });
+
+    renderer.addQuad(node);
+
+    expect(context.setTransform).toHaveBeenCalledWith(1, 1, -1, 1, 0, 0);
+  });
+
+  it('skips the transform for an identity transform', () => {
+    const { renderer, context } = makeRenderer();
+    const node = makeColorNode({ tx: 5, ty: 10, ta: 1, tb: 0, tc: 0, td: 1 });
+
+    renderer.addQuad(node);
+
+    expect(context.setTransform).not.toHaveBeenCalled();
+    expect(context.save).not.toHaveBeenCalled();
+    expect(context.fillRect).toHaveBeenCalledWith(5, 10, 100, 50);
+  });
+});
+
+describe('CanvasRenderer.reset', () => {
+  const makeRenderer = (clearColorAlpha: number) => {
+    const renderer = Object.create(CanvasRenderer.prototype) as CanvasRenderer;
+    const context = {
+      setTransform: vi.fn(),
+      clearRect: vi.fn(),
+      fillRect: vi.fn(),
+      scale: vi.fn(),
+      fillStyle: '',
+    };
+    let widthWrites = 0;
+    const canvas = {
+      height: 100,
+      get width() {
+        return 200;
+      },
+      set width(_v: number) {
+        widthWrites++;
+      },
+    };
+    (renderer as any).context = context;
+    (renderer as any).canvas = canvas;
+    (renderer as any).pixelRatio = 2;
+    (renderer as any).clearColor = 'rgba(0,0,0,0)';
+    (renderer as any).clearColorAlpha = clearColorAlpha;
+    return { renderer, context, getWidthWrites: () => widthWrites };
+  };
+
+  it('clears via setTransform + clearRect without reallocating the canvas', () => {
+    const { renderer, context, getWidthWrites } = makeRenderer(0);
+
+    renderer.reset();
+
+    expect(getWidthWrites()).toBe(0);
+    expect(context.setTransform).toHaveBeenCalledWith(1, 0, 0, 1, 0, 0);
+    expect(context.clearRect).toHaveBeenCalledWith(0, 0, 200, 100);
+    expect(context.scale).toHaveBeenCalledWith(2, 2);
+  });
+
+  it('skips the clear-color fill when the clear color is fully transparent', () => {
+    const { renderer, context } = makeRenderer(0);
+
+    renderer.reset();
+
+    expect(context.fillRect).not.toHaveBeenCalled();
+  });
+
+  it('fills with the clear color when its alpha is non-zero', () => {
+    const { renderer, context } = makeRenderer(0xff);
+    (renderer as any).clearColor = 'rgba(16,32,48,1)';
+
+    renderer.reset();
+
+    expect(context.fillRect).toHaveBeenCalledWith(0, 0, 200, 100);
+    expect(context.fillStyle).toBe('rgba(16,32,48,1)');
+  });
+
+  it('updateClearColor keeps the alpha skip in sync', () => {
+    const { renderer, context } = makeRenderer(0xff);
+
+    renderer.updateClearColor(0x00000000);
+    renderer.reset();
+
+    expect(context.fillRect).not.toHaveBeenCalled();
+  });
+});
+
+describe('CanvasRenderer.addQuad allocation-free paths', () => {
+  const makeRenderer = () => {
+    const renderer = Object.create(CanvasRenderer.prototype) as CanvasRenderer;
+    const context = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      setTransform: vi.fn(),
+      scale: vi.fn(),
+      translate: vi.fn(),
+      fillRect: vi.fn(),
+      beginPath: vi.fn(),
+      rect: vi.fn(),
+      clip: vi.fn(),
+      fillStyle: '',
+      globalAlpha: 1,
+    };
+    (renderer as any).context = context;
+    (renderer as any).pixelRatio = 1;
+    (renderer as any).stage = { defaultTexture: null };
+    return { renderer, context };
+  };
+
+  const makeColorNode = (shader: unknown = null) =>
+    ({
+      globalTransform: { tx: 5, ty: 10, ta: 1, tb: 0, tc: 0, td: 1 },
+      clippingRect: { valid: true, x: 0, y: 0, w: 300, h: 200 },
+      placeholderActive: false,
+      premultipliedColorTl: 0xff0000ff,
+      premultipliedColorTr: 0xff0000ff,
+      premultipliedColorBr: 0xff0000ff,
+      worldAlpha: 1,
+      props: {
+        texture: { type: TextureType.color },
+        shader,
+        w: 100,
+        h: 50,
+      },
+    } as any);
+
+  it('clips with beginPath/rect/clip instead of a Path2D', () => {
+    const { renderer, context } = makeRenderer();
+
+    renderer.addQuad(makeColorNode());
+
+    expect(context.beginPath).toHaveBeenCalledTimes(1);
+    expect(context.rect).toHaveBeenCalledWith(0, 0, 300, 200);
+    expect(context.clip).toHaveBeenCalledWith();
+    expect(context.fillRect).toHaveBeenCalledWith(5, 10, 100, 50);
+  });
+
+  it('passes the same preallocated renderContext callback to every shader', () => {
+    // Real construction (not Object.create) so class-field initializers run —
+    // the preallocated callback is a field arrow function.
+    const context = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      fillRect: vi.fn(),
+      beginPath: vi.fn(),
+      rect: vi.fn(),
+      clip: vi.fn(),
+      fillStyle: '',
+      globalAlpha: 1,
+    };
+    const renderer = new CanvasRenderer({
+      stage: { pixelRatio: 1, clearColor: 0x00000000, defaultTexture: null },
+      canvas: { getContext: () => context },
+    } as any);
+    const seen: Array<() => void> = [];
+    const shader = {
+      applySNR: false,
+      render: vi.fn((_ctx: unknown, _node: unknown, rc: () => void) => {
+        seen.push(rc);
+        rc();
+      }),
+    };
+
+    renderer.addQuad(makeColorNode(shader));
+    renderer.addQuad(makeColorNode(shader));
+
+    expect(seen.length).toBe(2);
+    expect(seen[0]).toBe(seen[1]);
+    // The callback drew each node's content when invoked
+    expect(context.fillRect).toHaveBeenCalledTimes(2);
+    expect(context.fillRect).toHaveBeenCalledWith(5, 10, 100, 50);
+  });
+});
+
 describe('CanvasRenderer.getCapabilities', () => {
   it('reports the canvas backend with no WebGL or VAO support', () => {
     const renderer = Object.create(CanvasRenderer.prototype) as CanvasRenderer;

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

@@ -17,8 +17,16 @@ export class CanvasRenderer extends CoreRenderer {
   private canvas: HTMLCanvasElement;
   private pixelRatio: number;
   private clearColor: string;
+  private clearColorAlpha: number;
   public renderToTextureActive = false;
   activeRttNode: CoreNode | null = null;
+  // Scratch state for the preallocated shader renderContext callback below —
+  // valid only for the duration of the shader render() call in addQuad.
+  private shaderContextNode: CoreNode | null = null;
+  private shaderContextTexture: Texture | null = null;
+  private shaderRenderContext = () => {
+    this.renderContext(this.shaderContextNode!, this.shaderContextTexture!);
+  };
 
   constructor(options: CoreRendererOptions) {
     super(options);
@@ -29,16 +37,23 @@ export class CanvasRenderer extends CoreRenderer {
     this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
     this.pixelRatio = this.stage.pixelRatio;
     this.clearColor = normalizeCanvasColor(this.stage.clearColor);
+    this.clearColorAlpha = (this.stage.clearColor >>> 24) & 0xff;
   }
 
   reset(): void {
-    this.canvas.width = this.canvas.width; // quick reset canvas
-
     const ctx = this.context;
+    const w = this.canvas.width;
+    const h = this.canvas.height;
+
+    // The frame's save/restore pairs are balanced, so resetting the transform
+    // and clearing is equivalent to the `canvas.width = canvas.width` trick
+    // without tearing down the backing store every frame.
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, w, h);
 
-    if (this.clearColor) {
+    if (this.clearColorAlpha !== 0) {
       ctx.fillStyle = this.clearColor;
-      ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+      ctx.fillRect(0, 0, w, h);
     }
 
     ctx.scale(this.pixelRatio, this.pixelRatio);
@@ -72,7 +87,7 @@ export class CanvasRenderer extends CoreRenderer {
       }
     }
 
-    const hasTransform = ta !== 1;
+    const hasTransform = ta !== 1 || td !== 1 || tb !== 0 || tc !== 0;
     const clippingValid = clippingRect.valid === true;
 
     // If the clipping rect is valid but zero-area, the node is fully clipped — skip rendering
@@ -99,10 +114,9 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     if (hasClipping === true) {
-      const path = new Path2D();
-      const { x, y, w, h } = clippingRect;
-      path.rect(x, y, w, h);
-      ctx.clip(path);
+      ctx.beginPath();
+      ctx.rect(clippingRect.x, clippingRect.y, clippingRect.w, clippingRect.h);
+      ctx.clip();
     }
 
     if (hasTransform === true) {
@@ -121,12 +135,11 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     if (hasShader === true) {
-      let renderContext: (() => void) | null = () => {
-        this.renderContext(node, texture);
-      };
-
-      (shader as CanvasShaderNode).render(ctx, node, renderContext);
-      renderContext = null;
+      this.shaderContextNode = node;
+      this.shaderContextTexture = texture;
+      (shader as CanvasShaderNode).render(ctx, node, this.shaderRenderContext);
+      this.shaderContextNode = null;
+      this.shaderContextTexture = null;
     } else {
       this.renderContext(node, texture);
     }
@@ -345,6 +358,7 @@ export class CanvasRenderer extends CoreRenderer {
    */
   updateClearColor(color: number) {
     this.clearColor = normalizeCanvasColor(color);
+    this.clearColorAlpha = (color >>> 24) & 0xff;
   }
 
   override getTextureCoords(

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

@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from 'vitest';
+import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
+import type { CoreNode } from '../../CoreNode.js';
+import type { Stage } from '../../Stage.js';
+
+type TestProps = { radius: number };
+
+const makeShaderNode = (props: TestProps) => {
+  const shManager = {
+    getShaderValues: vi.fn(),
+    setShaderValues: vi.fn(),
+    mutateShaderValueUsage: vi.fn(),
+  };
+  const stage = { shManager } as unknown as Stage;
+  const updater = vi.fn(function (this: CanvasShaderNode<TestProps>) {
+    (this.computed as Record<string, unknown>).value = 'computed';
+  });
+  const config = {
+    props: { radius: 0 },
+    render: vi.fn(),
+    update: updater,
+  } as unknown as CanvasShaderType<TestProps>;
+  const shaderNode = new CanvasShaderNode<TestProps>(
+    'test',
+    config,
+    stage,
+    props,
+  );
+  shaderNode.attachNode({ w: 100, h: 50 } as CoreNode);
+  return { shaderNode, shManager, updater };
+};
+
+describe('CanvasShaderNode.update value cache', () => {
+  it('computes and registers values on a cache miss', () => {
+    const { shaderNode, shManager, updater } = makeShaderNode({ radius: 4 });
+    shManager.getShaderValues.mockReturnValue(undefined);
+
+    shaderNode.update!();
+
+    expect(updater).toHaveBeenCalledTimes(1);
+    expect(shManager.setShaderValues).toHaveBeenCalledTimes(1);
+    expect(shManager.setShaderValues).toHaveBeenCalledWith(
+      shaderNode.valueKey,
+      shaderNode.computed,
+    );
+    expect((shaderNode.computed as Record<string, unknown>).value).toBe(
+      'computed',
+    );
+  });
+
+  it('reuses cached values on a cache hit without recomputing', () => {
+    const { shaderNode, shManager, updater } = makeShaderNode({ radius: 4 });
+    const cached = { value: 'cached' };
+    shManager.getShaderValues.mockReturnValue(cached);
+
+    shaderNode.update!();
+
+    expect(shaderNode.computed).toBe(cached);
+    expect(updater).not.toHaveBeenCalled();
+    expect(shManager.setShaderValues).not.toHaveBeenCalled();
+  });
+
+  it('skips all work when the value key is unchanged', () => {
+    const { shaderNode, shManager, updater } = makeShaderNode({ radius: 4 });
+    shManager.getShaderValues.mockReturnValue(undefined);
+
+    shaderNode.update!();
+    shaderNode.update!();
+
+    expect(updater).toHaveBeenCalledTimes(1);
+    expect(shManager.getShaderValues).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -63,6 +63,7 @@ export class CanvasShaderNode<
         ) as Record<string, unknown>;
         if (computed !== undefined) {
           this.computed = computed as Computed;
+          return;
         }
         this.computed = {};
         this.updater!(this.node as CoreNode);

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

@@ -60,7 +60,7 @@ export class SdfRenderOp extends CoreRenderOp {
   }
 
   draw() {
-    const { glw, options, stage } = this.renderer;
+    const { glw, stage } = this.renderer;
 
     stage.shManager.useShader(this.shader.program);
     this.shader.program.bindRenderOp(this);
@@ -73,7 +73,7 @@ export class SdfRenderOp extends CoreRenderOp {
       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,
+        glw.canvasH - clipHeight - this.clippingRect.y * pixelRatio,
       );
       // if parent has render texture, we need to adjust the scissor rect
       // to be relative to the parent's framebuffer