sketchout a canvas applet

2024-01-12 20:21:58 -05:00 · 2024-01-12 20:21:58 -05:00 · d106823e19
parent a7300c16b7
commit d106823e19
2 changed files with 36 additions and 0 deletions
--- a/island.html
+++ b/island.html
@ -0,0 +1,11 @@
+<html>
+  <head>
+    <title>ProcGen Island</title>
+  </head>
+  <body>
+    <script src="js/island.js"></script>
+    <script>
+      document.body.append(...IslandApplet());
+    </script>
+  </body>
+</html>
--- a/island.ts
+++ b/island.ts
@ -0,0 +1,25 @@
+const BLOWUP = 4;
+const WIDTH = 240;
+const HEIGHT = 135;
+
+export function IslandApplet() {
+  const canvas = Object.assign(document.createElement("canvas"), {
+    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";
+  cx.fillRect(0, 0, WIDTH, HEIGHT);
+  cx.fillStyle = "blue";
+  cx.fillRect(1, 1, WIDTH - 2, HEIGHT - 2);
+
+  return [canvas];
+}
+
+(globalThis as any).IslandApplet = IslandApplet;