螢幕座標 vs 世界座標
無限畫布裡有兩套座標系統，差別在於「會不會跟著畫布平移與縮放」。
螢幕座標 (Screen)
滑鼠在瀏覽器視窗上的位置。
- 原點
(0, 0)永遠是視窗左上角 - 不管畫布怎麼拖、怎麼縮放，它都不動
- 來源：
e.clientX、e.clientY - 單位：實體像素
世界座標 (World)
物件「在畫布裡」的真實位置。
- 原點
(0, 0)是畫布的原點（會跟著畫布跑） - 物件的
x, y, width, height全部存這套 - 單位：邏輯像素，不受縮放影響
為什麼要分兩套
畫布是無限的，但視窗是有限的。世界座標是「整張地圖」，螢幕座標是「眼前那片窗戶」，Viewport (offsetX, offsetY, scale) 就是窗戶現在對著地圖的哪一塊、放大幾倍。
使用時機對照
| 場景 | 用哪套 | 為什麼 |
|---|---|---|
物件的 x, y, width, height | 世界 | 不能受畫布縮放影響 |
| 滑鼠按下要新增矩形的位置 | 螢幕 → 轉世界 | 收到 screen，但要存世界 |
| 拖移畫布的位移量 | 螢幕 | 直接套到 offset |
| 拖移圖形的位移量 | 世界 | 要改 item.x，必須除以 scale |