putImageData() 的 dirty rectangle 是來源 ImageData 裡要寫回的區域。區域左上角仍使用原本的來源座標。計算局部更新的位置時，需要把來源起點一起算進去。

假設 ImageData 寬 100、高 80，只想取其中從 (20, 10) 開始、寬 30、高 20 的區域。呼叫：

ctx.putImageData(data, 200, 100, 20, 10, 30, 20);

這個區域在目的畫布的左上角是 (220, 110)，不是 (200, 100)。來源像素 (x, y) 會對應到目的像素 (dx + x, dy + y)，dirty rectangle 只限制哪些來源像素會被寫回。

如果需求是把這塊區域放到目的座標 (200, 100)，要扣掉來源區域的起點：

const dirty = { x: 20, y: 10, width: 30, height: 20 };
const destination = { x: 200, y: 100 };

ctx.putImageData(
  data,
  destination.x - dirty.x,
  destination.y - dirty.y,
  dirty.x,
  dirty.y,
  dirty.width,
  dirty.height
);

以上假設來源資料有效，dirty rectangle 的正整數尺寸及範圍已檢查，目的畫布也足以容納這塊區域。這段程式只處理位置換算，不負責一般化的裁切、範圍修正或記憶體配置。

用小張測試影像檢查座標即可。讓 dirty rectangle 左上角是紅色，右下角是藍色；寫回後，分別查看預期目的位置。整片同色的測試圖很難看出位移錯誤。

putImageData() 不受目前變換矩陣影響。先呼叫 translate() 不會替這次寫回補上位移。要做縮放或一般繪圖變換時，應先確認需要的是像素寫回還是 drawImage() 的繪圖流程。

本文使用 AI 輔助整理並檢查範例，程式的座標假設列在上方。參考：MDN putImageData、HTML Standard 的像素寫回演算法。