Mercurial

comparison infinite_canvas/index.html @ 276:b55c22cff335

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add interactive infinite canvas prototype
author MrJuneJune <me@mrjunejune.com>
date Mon, 17 Aug 2026 16:57:56 -0700
parents
children
comparison
equal deleted inserted replaced
274:c9be578316a6 276:b55c22cff335
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Infinite Canvas</title>
7 <style>
8 html, body {
9 width: 100%;
10 height: 100%;
11 margin: 0;
12 overflow: hidden;
13 background: #fff;
14 }
15
16 #canvas {
17 position: relative;
18 z-index: 1;
19 width: 100%;
20 height: 100%;
21 display: block;
22 outline: none;
23 }
24 </style>
25 </head>
26 <body>
27 <canvas id="canvas" tabindex="-1" oncontextmenu="event.preventDefault()"></canvas>
28 <script>
29 const canvas = document.getElementById("canvas");
30
31 function resizeCanvas() {
32 const ratio = window.devicePixelRatio || 1;
33 canvas.width = Math.max(1, Math.round(window.innerWidth * ratio));
34 canvas.height = Math.max(1, Math.round(window.innerHeight * ratio));
35 }
36
37 resizeCanvas();
38 window.addEventListener("resize", resizeCanvas);
39
40 var Module = {
41 canvas,
42 preRun: [resizeCanvas],
43 };
44 </script>
45 <script src="web_bin.js"></script>
46 </body>
47 </html>