task(B4): cache background image (fixes BUG-4)

frontend/src/canvas/RenderEngine.ts

@@ -50,6 +50,10 @@ export class RenderEngine {
   private snapPoints: SnapPoint[] = [];
   private activeSnapPoint: SnapPoint | null = null;
   private previewElement: CADElement | null = null;
+  /** Gecachtes Hintergrundbild (BUG-4-Fix): nur 1× pro backgroundSrc laden. */
+  private bgImage: HTMLImageElement | null = null;
+  /** src des zuletzt erfolgreich geladenen Hintergrundbilds. */
+  private bgSrcLoaded = '';
   private dpr = 1;
 
   constructor(
@@ -379,13 +383,30 @@ export class RenderEngine {
   }
 
   private drawBackground(): void {
-    // Background image rendering with transform
-    const img = new Image();
-    img.src = this.options.backgroundSrc!;
-    if (!img.complete) {
-      img.onload = () => this.render();
+    // Background image rendering with transform.
+    // BUG-4-Fix: Das Bild wird nur EINMAL pro backgroundSrc geladen und gecacht;
+    // vorher wurde pro Frame ein neues Image erzeugt (Flackern/Rerender-Schleife).
+    const src = this.options.backgroundSrc!;
+
+    // Quellwechsel: Cache invalidieren und neu laden
+    if (!this.bgImage || this.bgSrcLoaded !== src) {
+      const img = new Image();
+      img.onload = () => {
+        this.bgImage = img;
+        this.bgSrcLoaded = src;
+        this.render(); // einmalig nach erfolgreichem Laden neu zeichnen
+      };
+      img.src = src;
+      if (img.complete && img.naturalWidth > 0) {
+        // Bereits aus Browser-Cache verfügbar (z.B. dataURL)
+        this.bgImage = img;
+        this.bgSrcLoaded = src;
+      }
       return;
     }
+
+    // Gecachtes Bild zeichnen
+    const img = this.bgImage;
     this.ctx.save();
     this.ctx.globalAlpha = this.options.backgroundOpacity;
     const s = this.zoomPan.getScale();