Refactor GUI rendering and align RTA axis

www/views/static_layer.js

@@ -1,11 +1,9 @@
+import { createCanvasSurface } from '../core/canvas_surface.js';
+
+const MAX_STATIC_LAYERS = 24;
+
 export function createStaticLayerCanvas(width, height) {
-  const w = Math.max(1, width | 0);
-  const h = Math.max(1, height | 0);
-  if (typeof OffscreenCanvas !== 'undefined') return new OffscreenCanvas(w, h);
-  const c = document.createElement('canvas');
-  c.width = w;
-  c.height = h;
-  return c;
+  return createCanvasSurface(width, height)?.canvas || null;
 }
 
 export function drawCachedStaticLayer(state, g, layerId, key, rect, build) {
@@ -13,12 +11,21 @@ export function drawCachedStaticLayer(state, g, layerId, key, rect, build) {
   if (!state.staticLayers) state.staticLayers = new Map();
   const fullKey = `${layerId}:${key}:${Math.max(0, rect.w | 0)}x${Math.max(0, rect.h | 0)}`;
   let layer = state.staticLayers.get(fullKey);
+  if (layer) {
+    // Map-Reihenfolge als kleine LRU-Liste verwenden.
+    state.staticLayers.delete(fullKey);
+    state.staticLayers.set(fullKey, layer);
+  }
   if (!layer) {
     const canvas = createStaticLayerCanvas(rect.w, rect.h);
+    if (!canvas) return;
     const ctx = canvas.getContext('2d');
     build(ctx, rect);
     layer = { canvas };
     state.staticLayers.set(fullKey, layer);
+    while (state.staticLayers.size > MAX_STATIC_LAYERS) {
+      state.staticLayers.delete(state.staticLayers.keys().next().value);
+    }
   }
   g.drawImage(layer.canvas, rect.x, rect.y);
 }