Fix: Canvas-Größe und Bild-Caching

- Bilder werden im Speicher gecacht (kein erneutes Laden beim Zurücknavigieren)
- Größenberechnung nutzt canvas-area statt canvas-frame als Referenz
  → Bilder werden nicht mehr bei jedem Bildwechsel kleiner
- Bild füllt den verfügbaren Bereich so groß wie möglich aus

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/DrawCanvas.tsx

@@ -7,6 +7,9 @@ import {
 } from 'react'
 import type { ObjectMeta, Point, Selection } from '../types'
 
+// Module-level cache: URL → fertig geladenes Image-Objekt
+const imageCache = new Map<string, HTMLImageElement>()
+
 export interface DrawCanvasHandle {
   getCurrentSelection: () => Selection | null
   resetSelection: () => void
@@ -232,25 +235,39 @@ export default forwardRef<DrawCanvasHandle, Props>(function DrawCanvas(
 
   // Load image when src changes
   useEffect(() => {
+    const canvas = canvasRef.current
     if (!imageSrc) {
       imageRef.current = null
-      const canvas = canvasRef.current
       const ctx = canvas?.getContext('2d')
       if (canvas && ctx) ctx.clearRect(0, 0, canvas.width, canvas.height)
       return
     }
+    if (!canvas) return
+
+    const applyImage = (img: HTMLImageElement) => {
+      if (!canvasRef.current) return
+      imageRef.current = img
+      // canvas-frame (parentElement) wraps canvas — go up to canvas-area for real available space
+      const area = canvas.parentElement?.parentElement
+      const availW = (area?.clientWidth ?? 900) - 56
+      const availH = (area?.clientHeight ?? 700) - 56
+      const scale = Math.min(availW / img.width, availH / img.height, 1)
+      displayScale.current = isFinite(scale) && scale > 0 ? scale : 1
+      canvas.width = Math.round(img.width * displayScale.current)
+      canvas.height = Math.round(img.height * displayScale.current)
+      redraw()
+    }
+
+    const cached = imageCache.get(imageSrc)
+    if (cached) {
+      applyImage(cached)
+      return
+    }
+
     const img = new Image()
     img.onload = () => {
-      const canvas = canvasRef.current
+      imageCache.set(imageSrc, img)
-      if (!canvas) return
+      applyImage(img)
-      imageRef.current = img
-      const maxW = (canvas.parentElement?.clientWidth ?? 816) - 16
-      const maxH = window.innerHeight * 0.7
-      const scale = Math.min(maxW / img.width, maxH / img.height, 1)
-      displayScale.current = isFinite(scale) && scale > 0 ? scale : 1
-      canvas.width = img.width * displayScale.current
-      canvas.height = img.height * displayScale.current
-      redraw()
     }
     img.onerror = () => console.error('Fehler beim Laden des Bildes:', imageSrc)
     img.src = imageSrc