perf: Web-Canvas zeichnet bei jedem Touch-Move alle Striche und Fills neu #358

Problem

components/DrawingCanvas.web.tsx: Der Redraw-Effekt hat currentPath in seinen Dependencies. Deshalb läuft er bei jeder Maus- oder Touch-Bewegung komplett durch:

1. clearRect der ganzen Fläche
2. alle fertigen Striche neu zeichnen
3. jeden gespeicherten Fill neu ausführen: getImageData über die volle Fläche → floodFillPixels (Scan über alle Pixel) → putImageData

Bei einigen Fills auf einer Fläche von etwa 1400×400 px bedeutet das pro Move-Event mehrere Lese- und Schreibdurchgänge über die ganze Fläche (jeweils etwa 2,2 MB), obwohl nur ein kurzes Linienstück dazukommt. Das kann auf schwachen Geräten oder Tablets zu spürbarem Ruckeln führen.

Verwandt: Beim Replay (useGamePhase.ts, alle 30 ms für etwa 3 s) kommt pro Frame ein neues paths-Array. Mit Fills laufen auf Web der Flood-Fill und auf Native computeNativeFillLayers (DrawingCanvas.native.tsx) dadurch etwa 100-mal pro Replay erneut.

Vorschlag

• Web: Das Bild der fertigen Zeichnung (Striche und Fills) in einer Ref cachen, z. B. als Offscreen-Canvas oder ImageData. Ungültig wird der Cache nur, wenn sich paths, width oder height ändern. Bei einer Änderung von currentPath nur den Cache zurückkopieren und den Live-Strich darüber zeichnen.
• Replay: Fill-Ergebnisse pro bereits gezeichnetem Präfix cachen, damit ein Fill nur einmal berechnet wird.

Kontext

Gefunden im Simplify-Audit (#356). Dort bewusst nicht umgesetzt, weil die Änderung über ein kleines Refactoring hinausgeht. willReadFrequently ist seit #356 bereits gesetzt.