Mercurial
diff infinite_canvas/index.html @ 276:b55c22cff335
Add interactive infinite canvas prototype
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Mon, 17 Aug 2026 16:57:56 -0700 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/infinite_canvas/index.html Mon Aug 17 16:57:56 2026 -0700 @@ -0,0 +1,47 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Infinite Canvas</title> + <style> + html, body { + width: 100%; + height: 100%; + margin: 0; + overflow: hidden; + background: #fff; + } + + #canvas { + position: relative; + z-index: 1; + width: 100%; + height: 100%; + display: block; + outline: none; + } + </style> +</head> +<body> + <canvas id="canvas" tabindex="-1" oncontextmenu="event.preventDefault()"></canvas> + <script> + const canvas = document.getElementById("canvas"); + + function resizeCanvas() { + const ratio = window.devicePixelRatio || 1; + canvas.width = Math.max(1, Math.round(window.innerWidth * ratio)); + canvas.height = Math.max(1, Math.round(window.innerHeight * ratio)); + } + + resizeCanvas(); + window.addEventListener("resize", resizeCanvas); + + var Module = { + canvas, + preRun: [resizeCanvas], + }; + </script> + <script src="web_bin.js"></script> +</body> +</html>