Mercurial
view 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 source
<!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>