first commit

main.ts

@@ -0,0 +1,50 @@
+import { makeRgbLerpPic, threeDimCube } from "./lerppic";
+
+const WIDTH = 800;
+const HEIGHT = 600;
+
+function main() {
+    const root = document.getElementById("root");
+    const canvas = document.createElement("canvas");
+
+    if (!root || !canvas) {
+        return;
+    }
+
+    root.appendChild(canvas);
+
+    const ctx = canvas.getContext("2d", { alpha: true });
+    if (!ctx) {
+        return;
+    }
+
+    root.style.resize = 'both';
+    root.style.overflow = 'hidden';
+    root.style.width = `${ WIDTH + 20 }px`;
+    root.style.height = `${ HEIGHT + 20 }px`;
+    canvas.style.padding = "10px";
+
+    function setCanvasDims(width: number, height: number) {
+        canvas.width = width;
+        canvas.height = height;
+        canvas.style.width = `${ width }px`;
+        canvas.style.height = `${ height }px`;
+    }
+
+    setCanvasDims(WIDTH - 20, HEIGHT - 20);
+
+    const observer = new ResizeObserver((el) => {
+        setCanvasDims(el[0].target.clientWidth - 20, el[0].target.clientHeight - 20);
+    });
+    observer.observe(root);
+
+    const render = () => {
+        ctx.fillStyle = `rgb(150, 200, 255)`;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        makeRgbLerpPic(ctx);
+        window.requestAnimationFrame(render);
+    };
+    render();
+}
+
+main();