Canvas MOC 用途：這張地圖串連了關於「無限畫布 / Canvas 繪圖」的相關筆記，作為導航層。 座標系統核心 螢幕座標 vs 世界座標 screenToWorld 與 worldToScreen 座標轉換 SVG 寫 width 1 height 1 overflow visible 當純座標系容器 縮放與平移 無限畫布用 CSS transform 縮放整個圖層 以游標為中心縮放的反推公式 指數縮放讓滾輪手感平滑 背景網格用 backgroundImage 加 modulo 做無限延展 事件處理 Pointer Capture 讓滑鼠離開元件仍能收事件 HUD 用 data 屬性加 closest 阻擋畫布事件 React onWheel 預設 passive 必須綁原生事件才能 preventDefault 命中測試與幾何 橢圓命中測試用單位圓正規化 我的洞察 拖曳與平移的暫存狀態放 ref 而非 state Draft Pattern 繪製中的物件放獨立 state CSS transform 縮放下 strokeWidth 要除以 scale