如何在同一页面上使用两次基于ID的html5画布

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");

// 在canvas1上绘制图形
ctx1.fillStyle = "red";
ctx1.fillRect(0, 0, canvas1.width, canvas1.height);

// 在canvas2上绘制图形
ctx2.fillStyle = "blue";
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);