Auto-resize canvas

src/main/resources/static/js/admin.js

@@ -2,8 +2,6 @@ const canvas = document.getElementById("admin-canvas");
 const ctx = canvas.getContext("2d");
 const overlay = document.getElementById("admin-overlay");
 let canvasSettings = { width: 1920, height: 1080 };
-canvas.width = canvasSettings.width;
-canvas.height = canvasSettings.height;
 const assets = new Map();
 const mediaCache = new Map();
 const renderStates = new Map();
@@ -66,6 +64,8 @@ let interactionState = null;
 let lastSizeInputChanged = null;
 let stompClient;
 
+applyCanvasSettings(canvasSettings);
+
 audioUnlockEvents.forEach((eventName) => {
     window.addEventListener(eventName, () => {
         if (!pendingAudioUnlock.size) return;
@@ -467,8 +467,7 @@ function fetchCanvasSettings() {
             return r.json();
         })
         .then((settings) => {
-            canvasSettings = settings;
-            resizeCanvas();
+            applyCanvasSettings(settings);
         })
         .catch(() => {
             resizeCanvas();
@@ -476,6 +475,16 @@ function fetchCanvasSettings() {
         });
 }
 
+function applyCanvasSettings(settings) {
+    if (!settings) {
+        return;
+    }
+    const width = Number.isFinite(settings.width) ? settings.width : canvasSettings.width;
+    const height = Number.isFinite(settings.height) ? settings.height : canvasSettings.height;
+    canvasSettings = { width, height };
+    resizeCanvas();
+}
+
 function resizeCanvas() {
     if (!overlay) {
         return;
@@ -540,6 +549,10 @@ function updateRenderState(asset) {
 }
 
 function handleEvent(event) {
+    if (event.type === "CANVAS" && event.payload) {
+        applyCanvasSettings(event.payload);
+        return;
+    }
     const assetId = event.assetId || event?.patch?.id || event?.payload?.id;
     if (event.type === "DELETED") {
         assets.delete(assetId);