feat: add optional external canvas for rendering

src/main-api/Renderer.ts

@@ -267,6 +267,15 @@ export interface RendererMainSettings {
    * @defaultValue `true`
    */
   strictBounds?: boolean;
+
+  /**
+   * Canvas object to use for rendering
+   *
+   * @remarks
+   * This is used to render the scene graph. If not provided, a new canvas
+   * element will be created and appended to the target element.
+   */
+  canvas?: HTMLCanvasElement;
 }
 
 /**
@@ -358,6 +367,7 @@ export class RendererMain extends EventEmitter {
       quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024,
       fontEngines: settings.fontEngines,
       strictBounds: settings.strictBounds ?? true,
+      canvas: settings.canvas || document.createElement('canvas'),
     };
     this.settings = resolvedSettings;
 
@@ -367,12 +377,12 @@ export class RendererMain extends EventEmitter {
       deviceLogicalPixelRatio,
       devicePhysicalPixelRatio,
       inspector,
+      canvas,
     } = resolvedSettings;
 
     const deviceLogicalWidth = appWidth * deviceLogicalPixelRatio;
     const deviceLogicalHeight = appHeight * deviceLogicalPixelRatio;
 
-    const canvas = document.createElement('canvas');
     this.canvas = canvas;
     canvas.width = deviceLogicalWidth * devicePhysicalPixelRatio;
     canvas.height = deviceLogicalHeight * devicePhysicalPixelRatio;