diff --git a/examples/common/ExampleSettings.ts b/examples/common/ExampleSettings.ts
index 08b210a..e60f41e 100644
--- a/examples/common/ExampleSettings.ts
+++ b/examples/common/ExampleSettings.ts
@@ -29,6 +29,10 @@ export interface ExampleSettings {
    * Name of the test being run.
    */
   testName: string;
+  /**
+   * Render mode the test is running under.
+   */
+  renderMode: 'webgl' | 'canvas';
   /**
    * Renderer instance
    */
diff --git a/examples/index.ts b/examples/index.ts
index 927836d..2ce526e 100644
--- a/examples/index.ts
+++ b/examples/index.ts
@@ -29,6 +29,12 @@ interface TestModule {
     urlParams: URLSearchParams,
   ) => Partial<RendererMainSettings>;
   automation?: (settings: ExampleSettings) => Promise<void>;
+  /**
+   * Render modes this test's automation supports. Defaults to all modes.
+   * Set to `['webgl']` for tests exercising features the Canvas2D backend
+   * does not implement (e.g. render-to-texture).
+   */
+  renderModes?: ('webgl' | 'canvas')[];
 }
 
 const getTestPath = (testName: string) => `./tests/${testName}.ts`;
@@ -296,6 +302,7 @@ async function runTest(
 
   const exampleSettings: ExampleSettings = {
     testName: test,
+    renderMode: renderMode as 'webgl' | 'canvas',
     renderer,
     appElement,
     testRoot,
@@ -491,7 +498,16 @@ async function runAutomation(
     // results in automation mode.
     await setupMathRandom();
 
-    const { automation, customSettings } = await testModule();
+    const { automation, customSettings, renderModes } = await testModule();
+    if (
+      renderModes !== undefined &&
+      renderModes.indexOf(renderMode as 'webgl' | 'canvas') === -1
+    ) {
+      console.log(
+        `Skipping ${testName} (not enabled for renderMode=${renderMode})`,
+      );
+      continue;
+    }
     console.log(`Attempting to run automation for ${testName}...`);
     if (automation) {
       console.log(`Running automation for ${testName}...`);
@@ -509,6 +525,7 @@ async function runAutomation(
         });
         const exampleSettings: ExampleSettings = {
           testName,
+          renderMode: renderMode as 'webgl' | 'canvas',
           renderer,
           testRoot,
           appElement,
diff --git a/examples/tests/alpha-blending.ts b/examples/tests/alpha-blending.ts
index 65524c1..f71e16c 100644
--- a/examples/tests/alpha-blending.ts
+++ b/examples/tests/alpha-blending.ts
@@ -28,7 +28,8 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { testName, renderer, appElement, automation, testRoot } = settings;
+  const { testName, renderer, appElement, automation, testRoot, renderMode } =
+    settings;
   const savedState = automation
     ? null
     : loadStorage<LocalStorageData>(testName);
@@ -366,63 +367,66 @@ export default async function test(settings: ExampleSettings) {
 
     curY += 30 + PADDING;
 
-    const SDF_TEXT = 'This "SDF" text should appear invisible';
+    // The SDF text renderer is not registered in canvas render mode
+    if (renderMode === 'webgl') {
+      const SDF_TEXT = 'This "SDF" text should appear invisible';
 
-    // SDF Text - Same Color - 100% alpha prop / 100% alpha component
-    renderer.createTextNode({
-      text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
-      fontSize: 30,
-      alpha: 1,
-      color: bgColor,
-      y: curY,
-      textRendererOverride: 'sdf',
-      parent: sideContainer,
-    });
+      // SDF Text - Same Color - 100% alpha prop / 100% alpha component
+      renderer.createTextNode({
+        text: SDF_TEXT,
+        fontFamily: 'Ubuntu',
+        fontSize: 30,
+        alpha: 1,
+        color: bgColor,
+        y: curY,
+        textRendererOverride: 'sdf',
+        parent: sideContainer,
+      });
 
-    curY += 30 + PADDING;
+      curY += 30 + PADDING;
 
-    // SDF Text - Same Color - 50% alpha prop / 100% alpha component
-    renderer.createTextNode({
-      text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
-      fontSize: 30,
-      alpha: 0.5,
-      color: bgColor,
-      y: curY,
-      textRendererOverride: 'sdf',
-      parent: sideContainer,
-    });
+      // SDF Text - Same Color - 50% alpha prop / 100% alpha component
+      renderer.createTextNode({
+        text: SDF_TEXT,
+        fontFamily: 'Ubuntu',
+        fontSize: 30,
+        alpha: 0.5,
+        color: bgColor,
+        y: curY,
+        textRendererOverride: 'sdf',
+        parent: sideContainer,
+      });
 
-    curY += 30 + PADDING;
+      curY += 30 + PADDING;
 
-    // SDF Text - Same Color - 100% alpha prop / 50% alpha component
-    renderer.createTextNode({
-      text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
-      fontSize: 30,
-      alpha: 1,
-      color: mergeColorAlpha(bgColor, 0.5),
-      y: curY,
-      textRendererOverride: 'sdf',
-      parent: sideContainer,
-    });
+      // SDF Text - Same Color - 100% alpha prop / 50% alpha component
+      renderer.createTextNode({
+        text: SDF_TEXT,
+        fontFamily: 'Ubuntu',
+        fontSize: 30,
+        alpha: 1,
+        color: mergeColorAlpha(bgColor, 0.5),
+        y: curY,
+        textRendererOverride: 'sdf',
+        parent: sideContainer,
+      });
 
-    curY += 30 + PADDING;
+      curY += 30 + PADDING;
 
-    // SDF Text - Same Color - 50% alpha prop / 50% alpha component
-    renderer.createTextNode({
-      text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
-      fontSize: 30,
-      alpha: 0.5,
-      color: mergeColorAlpha(bgColor, 0.5),
-      y: curY,
-      textRendererOverride: 'sdf',
-      parent: sideContainer,
-    });
+      // SDF Text - Same Color - 50% alpha prop / 50% alpha component
+      renderer.createTextNode({
+        text: SDF_TEXT,
+        fontFamily: 'Ubuntu',
+        fontSize: 30,
+        alpha: 0.5,
+        color: mergeColorAlpha(bgColor, 0.5),
+        y: curY,
+        textRendererOverride: 'sdf',
+        parent: sideContainer,
+      });
 
-    curY += 30 + PADDING;
+      curY += 30 + PADDING;
+    }
 
     //// Texture Blending Test
 
diff --git a/examples/tests/clipping.ts b/examples/tests/clipping.ts
index 00de3e0..15b603a 100644
--- a/examples/tests/clipping.ts
+++ b/examples/tests/clipping.ts
@@ -1,5 +1,5 @@
 import type { ExampleSettings } from '../common/ExampleSettings.js';
-import { paginateTestRows } from '../common/paginateTestRows.js';
+import { paginateTestRows, type TestRow } from '../common/paginateTestRows.js';
 import { PageContainer } from '../common/PageContainer.js';
 import { waitForLoadedDimensions } from '../common/utils.js';
 import { deg2Rad } from '@lightningjs/renderer/utils';
@@ -15,7 +15,7 @@ const SQUARE_SIZE = 200;
 const PADDING = 20;
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer } = settings;
+  const { renderer, renderMode } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -434,34 +434,39 @@ export default async function test(settings: ExampleSettings) {
         return SQUARE_SIZE;
       },
     },
-    {
-      title:
-        'SDF text clips ANCESTOR text node children that is outside of its bounds',
-      content: async (rowNode) => {
-        const curX = 0;
-
-        const parent = renderer.createNode({
-          x: curX,
-          w: SQUARE_SIZE,
-          h: SQUARE_SIZE,
-          parent: rowNode,
-          clipping: true,
-        });
-
-        renderer.createTextNode({
-          w: SQUARE_SIZE,
-          h: SQUARE_SIZE,
-          parent,
-          fontFamily: 'Ubuntu',
-          fontSize: 40,
-          color: 0x000000ff,
-          textRendererOverride: 'sdf',
-          text: 'SDF ancestor clipping',
-        });
-
-        return SQUARE_SIZE;
-      },
-    },
+    // The SDF text renderer is not registered in canvas render mode
+    ...((renderMode === 'webgl'
+      ? [
+          {
+            title:
+              'SDF text clips ANCESTOR text node children that is outside of its bounds',
+            content: async (rowNode) => {
+              const curX = 0;
+
+              const parent = renderer.createNode({
+                x: curX,
+                w: SQUARE_SIZE,
+                h: SQUARE_SIZE,
+                parent: rowNode,
+                clipping: true,
+              });
+
+              renderer.createTextNode({
+                w: SQUARE_SIZE,
+                h: SQUARE_SIZE,
+                parent,
+                fontFamily: 'Ubuntu',
+                fontSize: 40,
+                color: 0x000000ff,
+                textRendererOverride: 'sdf',
+                text: 'SDF ancestor clipping',
+              });
+
+              return SQUARE_SIZE;
+            },
+          },
+        ]
+      : []) satisfies TestRow[]),
     {
       title: 'Clipping bounds are scaled with the `scale` property',
       content: async (rowNode) => {
diff --git a/examples/tests/render-settings.ts b/examples/tests/render-settings.ts
index 28b6e81..a46f565 100644
--- a/examples/tests/render-settings.ts
+++ b/examples/tests/render-settings.ts
@@ -22,14 +22,21 @@ export async function automation(settings: ExampleSettings) {
   await testPage();
 }
 
-export default async function test({ renderer, testRoot }: ExampleSettings) {
+export default async function test({
+  renderer,
+  testRoot,
+  renderMode,
+}: ExampleSettings) {
+  // Ubuntu-ssdf only exists as an SDF font; fall back to the canvas-loaded
+  // Ubuntu face so the labels render under the Canvas2D backend.
+  const fontFamily = renderMode === 'canvas' ? 'Ubuntu' : 'Ubuntu-ssdf';
   const ppr = renderer.stage.options.devicePhysicalPixelRatio;
   const lpr = renderer.stage.options.deviceLogicalPixelRatio;
 
   const info = renderer.createTextNode({
     text: 'Initial default settings',
     fontSize: 30,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     x: 10,
     y: 810,
     maxWidth: renderer.root.w - 20,
@@ -41,7 +48,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: 960,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
 
@@ -82,7 +89,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     pivot: 0,
     text: 'red',
     fontSize: 80,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: boundaryRect2,
   });
 
@@ -92,7 +99,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -102,7 +109,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -112,7 +119,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -122,7 +129,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -132,7 +139,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -151,7 +158,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 50,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -170,7 +177,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     y: yPos,
     h: 100,
     text: 'Inspector enabled?',
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     fontSize: 30,
     parent: testRoot,
     data: {
@@ -184,7 +191,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos + 100,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
diff --git a/examples/tests/rtt-dimension.ts b/examples/tests/rtt-dimension.ts
index 5b9f215..d5c798e 100644
--- a/examples/tests/rtt-dimension.ts
+++ b/examples/tests/rtt-dimension.ts
@@ -1,6 +1,9 @@
 import type { ExampleSettings } from '../common/ExampleSettings.js';
 import rocko from '../assets/rocko.png';
 
+// renderToTexture is a noop on the Canvas2D backend
+export const renderModes: ('webgl' | 'canvas')[] = ['webgl'];
+
 export async function automation(settings: ExampleSettings) {
   const page = await test(settings);
 
diff --git a/examples/tests/rtt-spritemap.ts b/examples/tests/rtt-spritemap.ts
index 8cd9e5c..6e40374 100644
--- a/examples/tests/rtt-spritemap.ts
+++ b/examples/tests/rtt-spritemap.ts
@@ -1,6 +1,9 @@
 import type { ExampleSettings } from '../common/ExampleSettings.js';
 import spritemap from '../assets/spritemap.png';
 
+// renderToTexture is a noop on the Canvas2D backend
+export const renderModes: ('webgl' | 'canvas')[] = ['webgl'];
+
 export async function automation(settings: ExampleSettings) {
   // Snapshot single page
   await test(settings);
diff --git a/examples/tests/stress-animation.ts b/examples/tests/stress-animation.ts
index 9e793a6..df0fc7d 100644
--- a/examples/tests/stress-animation.ts
+++ b/examples/tests/stress-animation.ts
@@ -130,7 +130,11 @@ export default async function test({
   testRoot,
   perfMultiplier,
   automation,
+  renderMode,
 }: ExampleSettings) {
+  // The SDF text renderer is not registered in canvas render mode — fall back
+  // to canvas text there so the HUD/debug text still renders.
+  const textRenderer = renderMode === 'canvas' ? 'canvas' : 'sdf';
   const params = new URLSearchParams(window.location.search);
   const targetFps = Number(params.get('targetfps') ?? 10);
   const vaoOff = params.get('novao') === 'true';
@@ -178,7 +182,7 @@ export default async function test({
     x: 20,
     y: APP_H - 90,
     fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf', // never Canvas here — it re-rasterizes per edit and OOMs TVs
+    textRendererOverride: textRenderer, // sdf on webgl — Canvas text re-rasterizes per edit and OOMs TVs
     fontSize: 26,
     lineHeight: 32,
     color: 0xffffffff,
@@ -307,7 +311,7 @@ export default async function test({
     w: 580,
     contain: 'width',
     fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf',
+    textRendererOverride: textRenderer,
     fontSize: 26,
     lineHeight: 30,
     color: 0x33ff88ff,
@@ -377,7 +381,7 @@ export default async function test({
     x: APP_W - FPS_W + 16,
     y: 8,
     fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf',
+    textRendererOverride: textRenderer,
     fontSize: 32,
     lineHeight: 38,
     color: 0x33ff88ff,
@@ -489,7 +493,7 @@ export default async function test({
     w: 820,
     contain: 'width',
     fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf',
+    textRendererOverride: textRenderer,
     fontSize: 34,
     lineHeight: 48,
     color: 0xffffffff,
@@ -520,7 +524,7 @@ export default async function test({
     w: 760,
     contain: 'width',
     fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf',
+    textRendererOverride: textRenderer,
     fontSize: 24,
     lineHeight: 32,
     color: 0x9fb4d8ff, // slate-300 (0xRRGGBBAA)
@@ -548,7 +552,7 @@ export default async function test({
     w: 820,
     contain: 'width',
     fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf',
+    textRendererOverride: textRenderer,
     fontSize: 26,
     lineHeight: 34,
     color: 0x33ff88ff,
@@ -564,7 +568,7 @@ export default async function test({
     w: 820,
     contain: 'width',
     fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf',
+    textRendererOverride: textRenderer,
     fontSize: 20,
     lineHeight: 28,
     color: 0x94a3b8ff, // slate-400 (0xRRGGBBAA)
diff --git a/examples/tests/stress-tv.ts b/examples/tests/stress-tv.ts
index 6cb858f..c13a1c9 100644
--- a/examples/tests/stress-tv.ts
+++ b/examples/tests/stress-tv.ts
@@ -135,7 +135,11 @@ export default async function test({
   renderer,
   testRoot,
   perfMultiplier,
+  renderMode,
 }: ExampleSettings) {
+  // The SDF text renderer is not registered in canvas render mode — fall back
+  // to canvas text there so the HUD and card text still render.
+  const textRenderer = renderMode === 'canvas' ? 'canvas' : 'sdf';
   const params = new URLSearchParams(window.location.search);
   const autosweep = params.get('autosweep') === 'true';
   const loadBudgetMs = Number(params.get('loadbudget') ?? 1000);
@@ -171,7 +175,7 @@ export default async function test({
     x: 20,
     y: APP_H - 150,
     fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf', // never Canvas here — it re-rasterizes per edit and OOMs TVs
+    textRendererOverride: textRenderer, // sdf on webgl — Canvas text re-rasterizes per edit and OOMs TVs
     fontSize: 22,
     color: 0xffffffff,
     text: '',
@@ -253,7 +257,7 @@ export default async function test({
           x: gap,
           y: cardH * 0.62,
           fontFamily: 'Ubuntu',
-          textRendererOverride: 'sdf',
+          textRendererOverride: textRenderer,
           fontSize,
           color: 0xffffffff,
           text: randomTitle(8),
@@ -267,7 +271,7 @@ export default async function test({
           x: gap,
           y: cardH * 0.62 + fontSize * 1.3,
           fontFamily: 'Ubuntu',
-          textRendererOverride: 'sdf',
+          textRendererOverride: textRenderer,
           fontSize: fontSize * 0.8,
           color: 0x94a3b8ff, // slate-400 (0xRRGGBBAA)
           text: randomTitle(12),
@@ -413,7 +417,7 @@ export default async function test({
       x: 40,
       y: 60,
       fontFamily: 'Ubuntu',
-      textRendererOverride: 'sdf',
+      textRendererOverride: textRenderer,
       fontSize: 30,
       lineHeight: 42,
       color: 0xffffffff,
diff --git a/examples/tests/text-alpha.ts b/examples/tests/text-alpha.ts
index 69eaec2..d88dede 100644
--- a/examples/tests/text-alpha.ts
+++ b/examples/tests/text-alpha.ts
@@ -27,7 +27,7 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer, testRoot } = settings;
+  const { renderer, testRoot, renderMode } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -36,7 +36,8 @@ export default async function test(settings: ExampleSettings) {
   });
 
   await paginateTestRows(pageContainer, [
-    ...generateAlphaTest(renderer, 'sdf'),
+    // The SDF text renderer is not registered in canvas render mode
+    ...(renderMode === 'webgl' ? generateAlphaTest(renderer, 'sdf') : []),
     ...generateAlphaTest(renderer, 'canvas'),
   ]);
 
diff --git a/examples/tests/text-contain.ts b/examples/tests/text-contain.ts
index 3783dda..9321e79 100644
--- a/examples/tests/text-contain.ts
+++ b/examples/tests/text-contain.ts
@@ -20,7 +20,7 @@ export async function automation(settings: ExampleSettings) {
  * @returns
  */
 export default async function test(settings: ExampleSettings) {
-  const { renderer, testRoot } = settings;
+  const { renderer, testRoot, renderMode } = settings;
 
   // Set a smaller snapshot area
   testRoot.w = 400;
@@ -45,20 +45,24 @@ export default async function test(settings: ExampleSettings) {
     parent: testRoot,
   });
 
-  const text1 = renderer.createTextNode({
-    x: textSizeAfterLoadingBg.x,
-    y: textSizeAfterLoadingBg.y,
-    color: 0x000000ff,
-    forceLoad: true,
-    fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf',
-    fontSize: 20,
-    text: `Lorem ipsum dolor sit e
+  // The SDF text renderer is not registered in canvas render mode
+  const text1 =
+    renderMode === 'webgl'
+      ? renderer.createTextNode({
+          x: textSizeAfterLoadingBg.x,
+          y: textSizeAfterLoadingBg.y,
+          color: 0x000000ff,
+          forceLoad: true,
+          fontFamily: 'Ubuntu',
+          textRendererOverride: 'sdf',
+          fontSize: 20,
+          text: `Lorem ipsum dolor sit e
 Consectetur adipiscing elit. Vivamus id.
 Suspendisse sollicitudin posuere felis.
 Vivamus consectetur ex magna, non mollis.`,
-    parent: testRoot,
-  });
+          parent: testRoot,
+        })
+      : null;
 
   const text2 = renderer.createTextNode({
     x: textSizeAfterLoadingBg.x,
@@ -132,32 +136,40 @@ Vivamus consectetur ex magna, non mollis.`,
   });
 
   let i = 0;
+  const sdfMutations =
+    text1 === null
+      ? []
+      : [
+          () => {
+            text1.alpha = 1;
+            text2.alpha = 0;
+            text1.maxWidth = 0;
+            text1.maxHeight = 0;
+          },
+          () => {
+            // SDF, contain width
+            text1.maxWidth = 200;
+          },
+          () => {
+            // SDF, contain width (smaller)
+            text1.maxWidth = 195;
+          },
+          () => {
+            // SDF, contain both
+            text1.maxHeight = 203;
+          },
+          () => {
+            // SDF, contain both (1 pixel larger to show another line)
+            text1.maxHeight = 204;
+          },
+        ];
   const mutations = [
-    () => {
-      text1.alpha = 1;
-      text2.alpha = 0;
-      text1.maxWidth = 0;
-      text1.maxHeight = 0;
-    },
-    () => {
-      // SDF, contain width
-      text1.maxWidth = 200;
-    },
-    () => {
-      // SDF, contain width (smaller)
-      text1.maxWidth = 195;
-    },
-    () => {
-      // SDF, contain both
-      text1.maxHeight = 203;
-    },
-    () => {
-      // SDF, contain both (1 pixel larger to show another line)
-      text1.maxHeight = 204;
-    },
+    ...sdfMutations,
     () => {
       // Canvas, contain none
-      text1.alpha = 0;
+      if (text1 !== null) {
+        text1.alpha = 0;
+      }
       text2.alpha = 1;
       text2.maxWidth = 0;
     },
@@ -194,10 +206,11 @@ Vivamus consectetur ex magna, non mollis.`,
     }
     i = idx;
     mutations[i]?.();
-    const targetText = i > 4 ? text2 : text1;
+    const isCanvas = i >= sdfMutations.length || text1 === null;
+    const targetText = isCanvas ? text2 : text1;
 
     header.text = makeHeader(
-      i > 4 ? 'canvas' : 'sdf',
+      isCanvas ? 'canvas' : 'sdf',
       targetText.maxWidth,
       targetText.maxHeight,
     );
diff --git a/examples/tests/text-dimensions.ts b/examples/tests/text-dimensions.ts
index cd91f39..2f2a897 100644
--- a/examples/tests/text-dimensions.ts
+++ b/examples/tests/text-dimensions.ts
@@ -20,7 +20,8 @@ export async function automation(settings: ExampleSettings) {
  * @returns
  */
 export default async function test(settings: ExampleSettings) {
-  const { renderer, testRoot } = settings;
+  const { renderer, testRoot, renderMode } = settings;
+  const sdfEnabled = renderMode === 'webgl';
 
   // Set a smaller snapshot area
   testRoot.w = 200;
@@ -44,7 +45,7 @@ export default async function test(settings: ExampleSettings) {
     color: 0x000000ff,
     forceLoad: true,
     fontFamily: 'Ubuntu',
-    textRendererOverride: 'sdf',
+    textRendererOverride: sdfEnabled ? 'sdf' : 'canvas',
     fontSize: 50,
     text: '',
     parent: testRoot,
@@ -65,13 +66,17 @@ export default async function test(settings: ExampleSettings) {
 
   let i = 0;
   const mutations = [
-    () => {
-      text1.text = 'SDF';
-      text1.textRendererOverride = 'sdf';
-    },
-    () => {
-      text1.text = 'SDF\ngyqpj';
-    },
+    ...(sdfEnabled
+      ? [
+          () => {
+            text1.text = 'SDF';
+            text1.textRendererOverride = 'sdf';
+          },
+          () => {
+            text1.text = 'SDF\ngyqpj';
+          },
+        ]
+      : []),
     () => {
       text1.text = 'Canvas';
       text1.textRendererOverride = 'canvas';
@@ -79,21 +84,29 @@ export default async function test(settings: ExampleSettings) {
     () => {
       text1.text = 'Canvas\ngyqpj';
     },
-    () => {
-      // Test one more time with SDF to make sure Canvas
-      text1.text = 'SDF 2nd';
-      text1.textRendererOverride = 'sdf';
-    },
+    ...(sdfEnabled
+      ? [
+          () => {
+            // Test one more time with SDF to make sure Canvas
+            text1.text = 'SDF 2nd';
+            text1.textRendererOverride = 'sdf';
+          },
+        ]
+      : []),
     () => {
       // Test when text ends with space for correct width
       text1.text = 'Canvas ';
       text1.textRendererOverride = 'canvas';
     },
-    () => {
-      // Test when text ends with space for correct width
-      text1.text = 'SDF ';
-      text1.textRendererOverride = 'sdf';
-    },
+    ...(sdfEnabled
+      ? [
+          () => {
+            // Test when text ends with space for correct width
+            text1.text = 'SDF ';
+            text1.textRendererOverride = 'sdf';
+          },
+        ]
+      : []),
   ];
   /**
    * Run the next mutation in the list
diff --git a/examples/tests/text-jump.ts b/examples/tests/text-jump.ts
index b3776e0..62f9e16 100644
--- a/examples/tests/text-jump.ts
+++ b/examples/tests/text-jump.ts
@@ -13,7 +13,11 @@ export async function automation(settings: ExampleSettings) {
  * container that uses mount/autosize. If parent dimensions change from initial
  * frame to loaded frame, its mount translation can cause a visible jump.
  */
-export default async function test({ renderer, testRoot }: ExampleSettings) {
+export default async function test({
+  renderer,
+  testRoot,
+  renderMode,
+}: ExampleSettings) {
   testRoot.w = 900;
   testRoot.h = 360;
   testRoot.color = 0xffffffff;
@@ -28,13 +32,15 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     parent: testRoot,
   });
 
-  await runCase({
-    renderer,
-    testRoot,
-    y: 120,
-    rendererType: 'sdf',
-    label: 'SDF',
-  });
+  if (renderMode === 'webgl') {
+    await runCase({
+      renderer,
+      testRoot,
+      y: 120,
+      rendererType: 'sdf',
+      label: 'SDF',
+    });
+  }
 
   await runCase({
     renderer,
diff --git a/examples/tests/text-line-height.ts b/examples/tests/text-line-height.ts
index 053953f..d16bd33 100644
--- a/examples/tests/text-line-height.ts
+++ b/examples/tests/text-line-height.ts
@@ -10,7 +10,7 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer } = settings;
+  const { renderer, renderMode } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -18,7 +18,7 @@ export default async function test(settings: ExampleSettings) {
   });
 
   await paginateTestRows(pageContainer, [
-    ...generateLineHeightTest(renderer, 'sdf'),
+    ...(renderMode === 'webgl' ? generateLineHeightTest(renderer, 'sdf') : []),
     ...generateLineHeightTest(renderer, 'canvas'),
   ]);
 
diff --git a/examples/tests/text-max-lines.ts b/examples/tests/text-max-lines.ts
index 8ad083a..5b15a58 100644
--- a/examples/tests/text-max-lines.ts
+++ b/examples/tests/text-max-lines.ts
@@ -11,7 +11,7 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer } = settings;
+  const { renderer, renderMode } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -19,8 +19,9 @@ export default async function test(settings: ExampleSettings) {
   });
 
   await paginateTestRows(pageContainer, [
-    ...generateMaxLinesTest(renderer, 'sdf'),
-    null,
+    ...(renderMode === 'webgl'
+      ? [...generateMaxLinesTest(renderer, 'sdf'), null]
+      : []),
     ...generateMaxLinesTest(renderer, 'canvas'),
   ]);
 
diff --git a/examples/tests/text-offscreen-move.ts b/examples/tests/text-offscreen-move.ts
index 0e169f5..9bae722 100644
--- a/examples/tests/text-offscreen-move.ts
+++ b/examples/tests/text-offscreen-move.ts
@@ -21,7 +21,7 @@ export async function automation(settings: ExampleSettings) {
  * @param param0
  */
 export default async function test(settings: ExampleSettings) {
-  const { renderer } = settings;
+  const { renderer, renderMode } = settings;
 
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
@@ -29,12 +29,20 @@ export default async function test(settings: ExampleSettings) {
     title: 'Text Offscreen Move Tests',
   });
 
-  pageContainer.pushPage(createTestCase(renderer, 'sdf', 0, 0));
-  pageContainer.pushPage(createTestCase(renderer, 'sdf', 400, 0));
-  pageContainer.pushPage(createTestCase(renderer, 'sdf', 400, 400));
-  pageContainer.pushPage(createTestCase(renderer, 'canvas', 0, 0));
-  pageContainer.pushPage(createTestCase(renderer, 'canvas', 400, 0));
-  pageContainer.pushPage(createTestCase(renderer, 'canvas', 400, 400));
+  if (renderMode === 'webgl') {
+    pageContainer.pushPage(createTestCase(renderer, renderMode, 'sdf', 0, 0));
+    pageContainer.pushPage(createTestCase(renderer, renderMode, 'sdf', 400, 0));
+    pageContainer.pushPage(
+      createTestCase(renderer, renderMode, 'sdf', 400, 400),
+    );
+  }
+  pageContainer.pushPage(createTestCase(renderer, renderMode, 'canvas', 0, 0));
+  pageContainer.pushPage(
+    createTestCase(renderer, renderMode, 'canvas', 400, 0),
+  );
+  pageContainer.pushPage(
+    createTestCase(renderer, renderMode, 'canvas', 400, 400),
+  );
 
   await delay(200);
   pageContainer.finalizePages();
@@ -51,6 +59,7 @@ const commonTextProps = {
 
 function createTestCase(
   renderer: RendererMain,
+  renderMode: ExampleSettings['renderMode'],
   textRenderer: 'canvas' | 'sdf',
   maxWidth: number,
   maxHeight: number,
@@ -61,7 +70,7 @@ function createTestCase(
       y: 10,
       text: '',
       fontFamily: 'Ubuntu',
-      textRendererOverride: 'sdf',
+      textRendererOverride: renderMode === 'webgl' ? 'sdf' : 'canvas',
       fontSize: 30,
       parent: page,
     });
diff --git a/examples/tests/text-overflow-suffix.ts b/examples/tests/text-overflow-suffix.ts
index 3b0542d..4f42faa 100644
--- a/examples/tests/text-overflow-suffix.ts
+++ b/examples/tests/text-overflow-suffix.ts
@@ -11,7 +11,7 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer } = settings;
+  const { renderer, renderMode } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -19,7 +19,9 @@ export default async function test(settings: ExampleSettings) {
   });
 
   await paginateTestRows(pageContainer, [
-    ...generateOverflowSuffixTest(renderer, 'sdf'),
+    ...(renderMode === 'webgl'
+      ? generateOverflowSuffixTest(renderer, 'sdf')
+      : []),
     ...generateOverflowSuffixTest(renderer, 'canvas'),
   ]);
 
diff --git a/examples/tests/text-rotation.ts b/examples/tests/text-rotation.ts
index 17f4b31..a337e32 100644
--- a/examples/tests/text-rotation.ts
+++ b/examples/tests/text-rotation.ts
@@ -10,7 +10,7 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer } = settings;
+  const { renderer, renderMode } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -18,7 +18,7 @@ export default async function test(settings: ExampleSettings) {
   });
 
   await paginateTestRows(pageContainer, [
-    ...generateRotationTest(renderer, 'sdf'),
+    ...(renderMode === 'webgl' ? generateRotationTest(renderer, 'sdf') : []),
     ...generateRotationTest(renderer, 'canvas'),
   ]);
 
diff --git a/examples/tests/text-scaling.ts b/examples/tests/text-scaling.ts
index 74abee1..3bcfe55 100644
--- a/examples/tests/text-scaling.ts
+++ b/examples/tests/text-scaling.ts
@@ -10,7 +10,7 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer, testRoot } = settings;
+  const { renderer, renderMode, testRoot } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -19,9 +19,13 @@ export default async function test(settings: ExampleSettings) {
   });
 
   await paginateTestRows(pageContainer, [
-    ...generateScalingTest(renderer, 'sdf', 'scale'),
-    ...generateScalingTest(renderer, 'sdf', 'scaleX'),
-    ...generateScalingTest(renderer, 'sdf', 'scaleY'),
+    ...(renderMode === 'webgl'
+      ? [
+          ...generateScalingTest(renderer, 'sdf', 'scale'),
+          ...generateScalingTest(renderer, 'sdf', 'scaleX'),
+          ...generateScalingTest(renderer, 'sdf', 'scaleY'),
+        ]
+      : []),
     ...generateScalingTest(renderer, 'canvas', 'scale'),
     ...generateScalingTest(renderer, 'canvas', 'scaleX'),
     ...generateScalingTest(renderer, 'canvas', 'scaleY'),
diff --git a/examples/tests/text-ssdf.ts b/examples/tests/text-ssdf.ts
index 9e6571f..b747556 100644
--- a/examples/tests/text-ssdf.ts
+++ b/examples/tests/text-ssdf.ts
@@ -1,5 +1,8 @@
 import type { ExampleSettings } from '../common/ExampleSettings.js';
 
+// SSDF fonts only exist for the SDF/WebGL text renderer
+export const renderModes: ('webgl' | 'canvas')[] = ['webgl'];
+
 export async function automation(settings: ExampleSettings) {
   await test(settings);
   await settings.snapshot();
diff --git a/examples/tests/text-vertical-align.ts b/examples/tests/text-vertical-align.ts
index 16787f3..00fd370 100644
--- a/examples/tests/text-vertical-align.ts
+++ b/examples/tests/text-vertical-align.ts
@@ -15,7 +15,7 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer } = settings;
+  const { renderer, renderMode } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -23,8 +23,9 @@ export default async function test(settings: ExampleSettings) {
   });
 
   await paginateTestRows(pageContainer, [
-    ...generateVerticalAlignTest(renderer, 'sdf'),
-    null,
+    ...(renderMode === 'webgl'
+      ? [...generateVerticalAlignTest(renderer, 'sdf'), null]
+      : []),
     ...generateVerticalAlignTest(renderer, 'canvas'),
   ]);
 
diff --git a/examples/tests/text-wordbreak.ts b/examples/tests/text-wordbreak.ts
index 36e7d25..3f5d347 100644
--- a/examples/tests/text-wordbreak.ts
+++ b/examples/tests/text-wordbreak.ts
@@ -10,7 +10,7 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer } = settings;
+  const { renderer, renderMode } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -18,10 +18,10 @@ export default async function test(settings: ExampleSettings) {
   });
 
   await paginateTestRows(pageContainer, [
-    ...generateWordBreakTest(renderer, 'sdf', 4),
-    ...generateWordBreakTest(renderer, 'sdf', 3),
-    ...generateWordBreakTest(renderer, 'sdf', 2),
-    ...generateWordBreakTest(renderer, 'sdf', 1),
+    ...generateWordBreakTest(renderer, renderMode, 'sdf', 4),
+    ...generateWordBreakTest(renderer, renderMode, 'sdf', 3),
+    ...generateWordBreakTest(renderer, renderMode, 'sdf', 2),
+    ...generateWordBreakTest(renderer, renderMode, 'sdf', 1),
   ]);
 
   return pageContainer;
@@ -44,6 +44,7 @@ const NODE_PROPS = {
 
 function generateWordBreakTest(
   renderer: RendererMain,
+  renderMode: 'webgl' | 'canvas',
   textRenderer: 'canvas' | 'sdf',
   maxLines: number,
 ): TestRow[] {
@@ -69,12 +70,16 @@ function generateWordBreakTest(
             containerHeight,
           },
           [
-            'Renderer: sdf',
-            renderer.createTextNode({
-              ...nodeProps,
-              maxLines,
-              textRendererOverride: 'sdf',
-            }),
+            ...(renderMode === 'webgl'
+              ? [
+                  'Renderer: sdf',
+                  renderer.createTextNode({
+                    ...nodeProps,
+                    maxLines,
+                    textRendererOverride: 'sdf',
+                  }),
+                ]
+              : []),
             'Renderer: canvas',
             renderer.createTextNode({
               ...nodeProps,
@@ -102,13 +107,17 @@ function generateWordBreakTest(
             containerHeight,
           },
           [
-            'Renderer: sdf',
-            renderer.createTextNode({
-              ...nodeProps,
-              maxLines,
-              wordBreak: 'break-all',
-              textRendererOverride: 'sdf',
-            }),
+            ...(renderMode === 'webgl'
+              ? [
+                  'Renderer: sdf',
+                  renderer.createTextNode({
+                    ...nodeProps,
+                    maxLines,
+                    wordBreak: 'break-all',
+                    textRendererOverride: 'sdf',
+                  }),
+                ]
+              : []),
             'Renderer: canvas',
             renderer.createTextNode({
               ...nodeProps,
@@ -137,13 +146,17 @@ function generateWordBreakTest(
             containerHeight,
           },
           [
-            'Renderer: sdf',
-            renderer.createTextNode({
-              ...nodeProps,
-              maxLines,
-              wordBreak: 'break-word',
-              textRendererOverride: 'sdf',
-            }),
+            ...(renderMode === 'webgl'
+              ? [
+                  'Renderer: sdf',
+                  renderer.createTextNode({
+                    ...nodeProps,
+                    maxLines,
+                    wordBreak: 'break-word',
+                    textRendererOverride: 'sdf',
+                  }),
+                ]
+              : []),
             'Renderer: canvas',
             renderer.createTextNode({
               ...nodeProps,