JavaScript Canvas 固定背景圖實現：background-attachment: fixed

問題

將 Canvas 繪製內容轉為 DataURL 設置為 body 背景，滾動時出現重影：原位置固定一顆心，滾動時又跟著動一顆。

原因

document.body.style.background = "url('" + canvas.toDataURL() + "')" 同時保留了 Canvas 元素自身（appendChild），導致兩層背景：Canvas 元素隨文檔流滾動，CSS 背景固定不動。

解決

1. 隱藏 Canvas 元素：canvas.style.display = 'none' 或不加入 DOM。
2. 直接設置 CSS 背景屬性：

   document.body.style.backgroundImage = "url('" + canvas.toDataURL() + "')";
   document.body.style.backgroundPosition = "center";
   document.body.style.backgroundRepeat = "no-repeat";
   document.body.style.backgroundAttachment = "fixed"; // 關鍵：固定不隨滾動
   document.body.style.backgroundSize = "cover"; // 可選：自適應
   

完整示例

var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawHeart(canvas.getContext('2d')); // 繪製心形

document.body.style.backgroundImage = "url('" + canvas.toDataURL() + "')";
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundPosition = "center";
document.body.style.backgroundRepeat = "no-repeat";
// 不要 appendChild(canvas)