HTML5 Canvasのキャンバス位置の値が解析されない

Question

私はキャンバスで遊んでいます。 3つのキャンバス要素を作成し、最初の2つを上に配置できますが、3番目のキャンバス要素はstyle.topとstyle.leftの値を受け入れません。

ご迷惑をおかけして申し訳ございません。

JSファイルにある関連するコード、：

var setPlayerBoardSize = function() { 
    "use strict"; 
    playerBoard.width = window.innerWidth; 
    playerBoard.height = window.innerHeight/6; 
} 

var setPlayerBoardPosition = function() { 
    "use strict"; 
    playerBoard.style.top = window.innerHeight/2 + playerBoard.height; 
    playerBoard.style.left = window.innerWidth/2 - playerBoard.width/2; 
    playerBoard.style.position = "absolute"; 

Firefoxのインスペクタのコンソール出力：

Error in parsing value for ‘top’. Declaration dropped. 
Error in parsing value for ‘left’. Declaration dropped. 

次のように他のキャンバス要素が配置されている：

var setCanvasSize = function() { 
    "use strict"; 
    pageCanvas.width = window.innerWidth; 
    pageCanvas.height = window.innerHeight; 
}; 

var setCanvasPosition = function() { 
    "use strict"; 
    pageCanvas.style.top = window.innerHeight/2 - pageCanvas.height/2; 
    pageCanvas.style.left = window.innerWidth/2 - pageCanvas.width/2; 
    pageCanvas.style.position = "absolute"; 
}; 

var setScoreBoardPosition = function() { 
    "use strict"; 
    scoreBoard.style.top = window.innerHeight/2 - pageCanvas.height/2; 
    scoreBoard.style.left = window.innerWidth/2 + pageCanvas.width/4; 
    scoreBoard.style.position = "absolute"; 
} 

を

これらはすべてページの冒頭で宣言されています。

HTMLファイル内

var pageCanvas = document.getElementById("pageCanvas"); 
    var pctx = pageCanvas.getContext('2d'); 

var scoreBoard = document.getElementById("scoreCanvas"); 
    var bctx = scoreBoard.getContext('2d'); 

var playerBoard = document.getElementById("playerCanvas"); 
    var sctx = playerBoard.getContext('2d'); 

キャンバス宣言は次のとおりです。

<canvas id="sparkyCanvas" width="1000" height="600">  
    </canvas> 
<canvas id="scoreCanvas" width="300" height="100">   
    </canvas> 
<canvas id="playerCanvas" width="1000" height="100"> 
    </canvas> 

私は困惑します！どんな援助も歓迎されるだろう。

Answer 1

CSS位置の値には単位が必要です。 someElement.style.position.left = 123はCSSでは意味がありません。 123の何？ px、em、% ...

function px(v) { 
     return (v | 0) + 'px'; 
    } 

    pageCanvas.style.top = px(window.innerHeight/2 - pageCanvas.height/2); 
    pageCanvas.style.left = px(window.innerWidth/2 - pageCanvas.width/2); 

等...

唯一の例外は0です。 0には単位が必要ありません。例えば

margin: 0; 

または

style.margin = 0; 

は有効です。