HTML5ページに複数のキャンバスを配置することはできますか？

Question

私は、HTML5ページ上で完全に機能する複数のキャンバスを持つことが可能かどうか疑問に思っていました。私は少し前にこれを試してみましたが、うまくいかなかったのですが、実際にこれをどうやって行うのか考えなくてはなりませんでした。それで、HTML5ページで複数のキャンバスを完全に機能させることは可能ですか？

Answer 1

var cnv1 = document.getElementById("1"); 
 
var ctx1 = cnv1.getContext("2d"); 
 
var cnv2 = document.getElementById("2"); 
 
var ctx2 = cnv2.getContext("2d"); 
 

 
ctx1.fillStyle = "#FF0000"; 
 
ctx1.fillRect(0, 0, 50, 75); 
 

 
ctx2.fillStyle = "#0000FF"; 
 
ctx2.fillRect(0, 0, 50, 75);

canvas { 
 
    border: 2px solid black; 
 
}

<canvas id="1" width="100px" height="100px"><p>Canvas doesn't work.</p></canvas> 
 
<canvas id="2" width="100px" height="100px"><p>Canvas doesn't work.</p></canvas>