Factor out some html helpers

island.ts

@@ -1,17 +1,14 @@
+import { canvas2d } from "./lib/html";
+
 const BLOWUP = 4;
 const WIDTH = 240;
 const HEIGHT = 135;
 
 export function IslandApplet() {
-  const canvas = Object.assign(document.createElement("canvas"), {
+  const [canvas, cx] = canvas2d({
     width: WIDTH * BLOWUP,
     height: HEIGHT * BLOWUP,
-  } satisfies Partial<HTMLCanvasElement>);
+  });
-
-  const cx = canvas.getContext("2d");
-  if (!cx) {
-    throw new Error("2D rendering context not supported");
-  }
   cx.scale(BLOWUP, BLOWUP);
 
   cx.fillStyle = "red";

lib/html.ts

@@ -0,0 +1,22 @@
+export function h<Name extends keyof HTMLElementTagNameMap>(
+  name: Name,
+  props: Partial<HTMLElementTagNameMap[Name]>,
+  ...children: Node[]
+): HTMLElementTagNameMap[Name] {
+  const element = Object.assign(document.createElement(name), props);
+  element.append(...children);
+  return element;
+}
+
+export function canvas2d(
+  props: Partial<HTMLCanvasElement>
+): [HTMLCanvasElement, CanvasRenderingContext2D] {
+  const canvas = h("canvas", props);
+
+  const cx = canvas.getContext("2d");
+  if (!cx) {
+    throw new Error("2D rendering context not supported");
+  }
+
+  return [canvas, cx];
+}