From 7d01cdd7ee29f336c584aef499a8d66aaac7336c Mon Sep 17 00:00:00 2001 From: will wade Date: Tue, 16 Jun 2026 19:57:08 +0100 Subject: [PATCH 1/2] Make canvas responsive to container size - Canvas fills container width with 4:3 aspect ratio - ResizeObserver syncs canvas resolution and calls setScreenSize - Works on window resize and container changes (e.g. iframe) --- wasm-build/demo.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/wasm-build/demo.html b/wasm-build/demo.html index d31b004..8e67043 100644 --- a/wasm-build/demo.html +++ b/wasm-build/demo.html @@ -23,6 +23,7 @@ canvas { border: 2px solid #ddd; border-radius: 4px; display: block; margin: 0 auto; cursor: crosshair; touch-action: none; + width: 100%; height: auto; aspect-ratio: 4 / 3; } .controls { width: 280px; background: white; border-radius: 8px; padding: 20px; @@ -348,6 +349,25 @@

Output Text

ctx.textAlign = 'center'; ctx.fillText('Loading DasherCore...', canvas.width / 2, canvas.height / 2); + // Responsive canvas: sync resolution to display size + function resizeCanvas() { + const rect = canvas.getBoundingClientRect(); + const w = Math.round(rect.width); + const h = Math.round(rect.height); + if (w > 0 && h > 0 && (w !== canvas.width || h !== canvas.height)) { + canvas.width = w; + canvas.height = h; + if (dasher && isRunning) { + dasher.setScreenSize(w, h); + } + } + } + + window.addEventListener('resize', resizeCanvas); + const resizeObserver = new ResizeObserver(resizeCanvas); + resizeObserver.observe(canvas); + resizeCanvas(); + window.addEventListener('beforeunload', () => { if (dasher) dasher.destroy(); }); From bfb7a67df42e87508d8e604058a4f25229168442 Mon Sep 17 00:00:00 2001 From: will wade Date: Tue, 16 Jun 2026 20:07:56 +0100 Subject: [PATCH 2/2] Remove header and instructions for minimal embeddable page --- wasm-build/demo.html | 21 ++------------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/wasm-build/demo.html b/wasm-build/demo.html index 8e67043..fd28e4f 100644 --- a/wasm-build/demo.html +++ b/wasm-build/demo.html @@ -75,23 +75,6 @@ -
-

DasherCore WebAssembly Demo

-

Native DasherCore performance in your browser — Built with C++ and WebAssembly

-
- -
-

How to use Dasher:

-

1. Move your mouse over the canvas to steer — the letters zoom toward you

-

2. The crosshair (vertical line) is where text gets entered — move up/down to choose letters

-

3. Move further right to dash faster; move left to slow down / reverse

-

4. Typed text appears in the output box below

-
- -
-

Loading DasherCore WebAssembly...

-
-
@@ -154,8 +137,8 @@

Output Text

let lastFpsTime = performance.now(); function updateStatus(message, type) { - statusText.textContent = message; - statusContainer.className = 'status ' + (type || 'loading'); + if (statusText) statusText.textContent = message; + if (statusContainer) statusContainer.className = 'status ' + (type || 'loading'); } function enableControls() {