refactor(driver): rename

packages/driver/src/js/renderer/index.ts

@@ -1,3 +1,3 @@
 export { Renderer } from "./renderer.ts";
 export { TextRasterizer } from "./text.ts";
-export { Canvas } from "./webgl_backend.ts";
+export { WebGL1Backend } from "./webgl_backend.ts";

packages/driver/src/js/renderer/renderer.ts

@@ -1,7 +1,7 @@
 import { DrawCommandInterpreter } from "../draw.ts";
 import { type ImageRepository, TextureFlags } from "../image.ts";
 import type { TextRasterizer } from "./text.ts";
-import type { Canvas } from "./webgl_backend.ts";
+import type { WebGL1Backend } from "./webgl_backend.ts";
 
 export type TextureBitmap = {
   id: string;
@@ -30,7 +30,7 @@ const colorEscape = [
 ];
 
 export class Renderer {
-  backend: Canvas | undefined;
+  backend: WebGL1Backend | undefined;
 
   private screenSize: { width: number; height: number };
   private currentColor: number[] = [0, 0, 0, 0];

packages/driver/src/js/renderer/webgl_backend.ts

@@ -174,7 +174,7 @@ class VertexBuffer {
   }
 }
 
-export class Canvas {
+export class WebGL1Backend {
   private readonly gl: WebGLRenderingContext;
 
   private readonly textureProgram: ShaderProgram<{
@@ -197,20 +197,20 @@ export class Canvas {
   private batchTextureCount = 0;
   private dispatchCount = 0;
 
-  get element(): OffscreenCanvas {
-    return this._element;
+  get canvas(): OffscreenCanvas {
+    return this._canvas;
   }
-  private readonly _element: OffscreenCanvas;
+  private readonly _canvas: OffscreenCanvas;
 
   constructor(canvas: OffscreenCanvas) {
-    this._element = canvas;
+    this._canvas = canvas;
 
     const gl = canvas.getContext("webgl");
     if (!gl) throw new Error("Failed to get WebGL context");
     this.gl = gl;
 
     gl.clearColor(0, 0, 0, 1);
-    gl.depthMask(false);
+    gl.enable(gl.TEXTURE_2D);
     gl.disable(gl.DEPTH_TEST);
     gl.enable(gl.BLEND);
 
@@ -267,8 +267,8 @@ export class Canvas {
   }
 
   resize(width: number, height: number) {
-    this._element.width = width;
-    this._element.height = height;
+    this._canvas.width = width;
+    this._canvas.height = height;
     this.setViewport(0, 0, width, height);
   }
 
@@ -314,8 +314,8 @@ export class Canvas {
     gl.bufferData(gl.ARRAY_BUFFER, this.vertices.buffer, gl.STREAM_DRAW);
     this.textureProgram.use((p) => {
       // Set up the viewport
-      this.gl.viewport(0, 0, this.element.width, this.element.height);
-      const matrix = orthoMatrix(0, this.element.width, this.element.height, 0, -9999, 9999);
+      this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+      const matrix = orthoMatrix(0, this.canvas.width, this.canvas.height, 0, -9999, 9999);
       this.gl.uniformMatrix4fv(p.mvpMatrix, false, new Float32Array(matrix));
 
       // Set up the texture

packages/driver/src/js/worker.ts

@@ -6,7 +6,7 @@ import { default as Module } from "../../dist/driver.mjs";
 import { NodeEmscriptenFS, SimpleAsyncFS, SimpleAsyncStore } from "./fs";
 import { ImageRepository } from "./image";
 import type { FilesystemConfig } from "./main.ts";
-import { Canvas, Renderer, TextRasterizer } from "./renderer";
+import { Renderer, TextRasterizer, WebGL1Backend } from "./renderer";
 
 type Mod = {
   HEAPU8: Uint8Array;
@@ -185,7 +185,7 @@ export class DriverWorker {
   }
 
   setCanvas(canvas: OffscreenCanvas) {
-    const backend = new Canvas(canvas);
+    const backend = new WebGL1Backend(canvas);
     if (this.renderer) {
       this.renderer.backend = backend;
     }