Use HTMLCanvasElement instead of OffscreenCanvas if it isn't available. (#40)

- This allows the Renderer to run on devices that do not support
OffscreenCanvas which is not available in prior to Chrome 69 / WPE 2.38

Author: frank-weindel

src/core/text-rendering/renderers/CanvasTextRenderer.ts

@@ -85,12 +85,18 @@ export interface CanvasTextRendererState extends TextRendererState {
 }
 
 export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
-  protected canvas: OffscreenCanvas;
-  protected context: OffscreenCanvasRenderingContext2D;
+  protected canvas: OffscreenCanvas | HTMLCanvasElement;
+  protected context:
+    | OffscreenCanvasRenderingContext2D
+    | CanvasRenderingContext2D;
 
   constructor(stage: Stage) {
     super(stage);
-    this.canvas = new OffscreenCanvas(0, 0);
+    if (typeof OffscreenCanvas !== 'undefined') {
+      this.canvas = new OffscreenCanvas(0, 0);
+    } else {
+      this.canvas = document.createElement('canvas');
+    }
     const context = this.canvas.getContext('2d');
     assertTruthy(context);
     this.context = context;

src/core/text-rendering/renderers/LightningTextTextureRenderer.ts

@@ -126,14 +126,16 @@ export interface RenderInfo {
 }
 
 export class LightningTextTextureRenderer {
-  private _canvas: OffscreenCanvas;
-  private _context: OffscreenCanvasRenderingContext2D;
+  private _canvas: OffscreenCanvas | HTMLCanvasElement;
+  private _context:
+    | OffscreenCanvasRenderingContext2D
+    | CanvasRenderingContext2D;
   private _settings: Settings;
   private renderInfo: RenderInfo | undefined;
 
   constructor(
-    canvas: OffscreenCanvas,
-    context: OffscreenCanvasRenderingContext2D,
+    canvas: OffscreenCanvas | HTMLCanvasElement,
+    context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,
   ) {
     this._canvas = canvas;
     this._context = context;