javascript - javascriptのウィンドウサイズに関連してアイテムを画面の中央に配置するにはどうすればよいですか?

Question

これが、私がやろうとしていることをよりよく説明するための私のコードです。中心に近づいていますが、常に中心から少しずれています。10,000 x 10,000 ピクセルのキャンバスです。

var winX=window.innerWidth/2; //get the clients browser width
var winY=window.innerHeight/2; //get the clients browser height
function drawPlayer() {
        ctx.beginPath();
        player.pX=randInt(4,10004); //get random X coordinate
        player.pY=randInt(4,10004); //get random Y coordinate
        ctx.arc(player.pX, player.pY, circR, 0, 2*Math.PI); //creates the circle that i'm trying to center on the screen
        ctx.fillStyle=colors[randInt(0,6)];
        ctx.fill();
        ctx.closePath();
        window.scrollTo((player.pX-winX)-2, (player.pY-winY)-2);
        document.body.style.overflow='hidden';
}

最初はスクロールバーが原因だと思っていましたが、スクロールバーを非表示にしていなくても、円は画面の中心から少しずれています。それを正しく中心に置くための助けがあれば大歓迎です。また、画面に円の半分または 4 分の 1 しか表示されないこともあります。