Mercurial

annotate infinite_canvas/index.html @ 281:c57149ad216e default tip

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