私のキャンバスに何も表示されないのはなぜですか？

Question

私はそのようなノブであり、なぜ私のキャンバスに何も表示されないのか分かりません。誰かが私を助けることができますか？とにかく私のキャンバスにブラックボックスがありたいと思っていました。

var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 1040; 
canvas.height = 400; 
canvas.style.display='block'; 
canvas.style.marginLeft="auto"; 
canvas.style.marginRight="auto"; 

var mainFunction= function(){ 
ctx.fillStyle = "rgb(0, 0, 0)"; 
ctx.beginPath(); 
ctx.rect(0, 0, canvas.width, canvas.height); 
ctx.closePath(); 
ctx.fill(); 
requestAnimationFrame(mainFunction); 
}; 

mainFunction(); 

Answer 1

<canvas>要素を作成しましたが、DOM内のどこにも添付していません。おそらく、

document.body.appendChild(canvas); 

または他の適切な容器のようなものがほしいと思うかもしれません。

Answer 2

基本的に、DOMに添付されたキャンバスはありません。

<canvas id="root"></canvas>でhtmlファイルを作成します。

var canvas = document.getElementById("root");