在HTML5中，我們可以使用canvas標簽來繪制各種各樣的圖形。有時候我們需要將兩個圖形疊加在一起，這時候可以使用一些簡單的代碼來實現。

// 創建第一個圖形
var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(10, 10, 100, 100);
// 創建第二個圖形，注意這里我故意將第二個圖形繪制在第一個圖形之上
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.fillStyle = "green";
ctx2.fillRect(30, 30, 100, 100);
// 將兩個圖形疊加起來
ctx2.globalCompositeOperation = "source-over";
ctx2.drawImage(canvas1, 0, 0);

上述代碼的實現步驟為：首先我們先創建兩個canvas標簽，然后在第一個canvas標簽上繪制一個紅色的正方形，接著在第二個canvas標簽上繪制一個綠色的正方形，但是我們故意將第二個圖形放在了第一個圖形的上層。最后，我們通過使用ctx2的globalCompositeOperation屬性將第一個圖形繪制在了第二個圖形之上，實現了兩個圖形的重疊效果。