make brush preview work under GPU

static/brush-preview.js

@@ -1,17 +1,63 @@
-export class BrushPreview extends HTMLElement {
-    constructor(width, height) {
-        super();
+import { BrushRenderer } from "rkgk/brush-renderer.js";
 
-        this.width = width;
-        this.height = height;
+export class BrushPreview extends HTMLElement {
+    connectedCallback() {
+        this.canvas = this.appendChild(document.createElement("canvas"));
+        this.gl = this.canvas.getContext("webgl2");
+
+        this.brushRenderer = new BrushRenderer(this.gl, this.canvasSource());
+
+        let resizeObserver = new ResizeObserver(() => this.#updateCanvasSize());
+        resizeObserver.observe(this);
+        this.#updateCanvasSize();
     }
 
-    connectedCallback() {
-        // TODO
+    #updateCanvasSize() {
+        this.canvas.width = this.clientWidth;
+        this.canvas.height = this.clientHeight;
+        this.dispatchEvent(new Event(".pixmapLost"));
+    }
+
+    canvasSource() {
+        let canvas = this.canvas;
+        return {
+            useCanvas(gl, id) {
+                let viewport = { x: 0, y: 0, width: canvas.width, height: canvas.height };
+                gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+                return viewport;
+            },
+
+            resetCanvas(gl) {},
+        };
     }
 
     async #renderBrushInner(haku) {
-        // TODO
+        let gl = this.gl;
+
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+
+        let canvas = this.canvas;
+        let result = await haku.evalBrush({
+            runDotter: async () => {
+                return {
+                    fromX: canvas.width / 2,
+                    fromY: canvas.height / 2,
+                    toX: canvas.width / 2,
+                    toY: canvas.height / 2,
+                    num: 0,
+                };
+            },
+
+            runScribble: async (renderToCanvas) => {
+                return renderToCanvas(this.brushRenderer, 0, 0, 0);
+            },
+        });
+
+        if (result.status != "ok") {
+            return { status: "error", phase: "eval", result };
+        }
+
         return { status: "ok" };
     }