もう一方のキャンバスの上に落ちてくるボールを描くために、意図的に重なる 2 つのキャンバスがあります。ページ上で重なっている 2 つのキャンバスの下に、重ならないように 3 つ目のキャンバスを配置したいと考えています。オーバーラップするキャンバスを保持する div 要素に相対位置がある場合、他の要素がオーバーラップすることを妨げません。私が理解しているように、その内部のキャンバスを絶対に配置してオーバーラップできるように、その div を相対的に配置する必要があります。
ここに私のHTMLがあります：
<div id="box" style="position: relative;"></div>
<div id="countdiv"></div>
JavaScript は次のとおりです。
boxCanvas = document.createElement("canvas");
// the margins on the page are 3%
boxCanvas.width = window.innerWidth - (window.innerWidth * .06);
boxCanvas.height = document.getElementById("height").value;
boxCanvas.style = "border: 1px solid #808080; position: absolute; left: 0; top: 0; z-index: 0";
document.getElementById("box").appendChild(boxCanvas);
// second canvas for drawing balls falling
ballCanvas = document.createElement("canvas");
ballCanvas.width = boxCanvas.width;
ballCanvas.height = boxCanvas.height;
ballCanvas.style = "border: 1px solid #808080; position: absolute; left: 0; top: 0; z-index: 1";
document.getElementById("box").appendChild(ballCanvas);
3 番目のキャンバスの JavaScript は次のとおりです。
countCanvas = document.createElement("canvas");
countCanvas.width = window.innerWidth - (window.innerWidth * .06);
countCanvas.height = 100;
countCanvas.style = "border: 1px solid #808080;";
document.getElementById("box").appendChild(countCanvas);
countctx = countCanvas.getContext("2d");
ballCanvas.height = boxCanvas.height;
ballCanvas.style = "border: 1px solid #808080; position: absolute; left: 0; top: 0; z-index: 1";
document.getElementById("countdiv").appendChild(ballCanvas);
drawbox() をクリックしてから "show hitcounts" をクリックすると、問題が発生します。助けてくれてありがとう！さらに情報を提供できるかどうか教えてください。