JavaScriptを使用してキャンバスの幅と高さを取得します

Question

現在、キャンバスの幅と高さを受け取ろうとしています。私は未定義の値が返さconsole.log(ctx.width);を使用して値を取得しようとした

<canvas id="ctx" style="height: calc(100vh - 142px); width: 100vw; display: block;"></canvas> 

<script type="text/javascript"> 
    var ctx = document.getElementById("ctx").getContext("2d"); 

    console.log(ctx.width); 

    var socket = io(); 

    socket.on('newPosition', function(data){ 
     ctx.clearRect(0, 0, ctx.width, ctx.height); 
     ctx.fillText('P', data.x, data.y); 
    }) 
</script> 

：あなたは、次のコードで見ることができるようにキャンバスは、styleパラメータを使用しています。私は、キャンバスをオートサイズに設定するためにスタイルタグを使用しているので、この問題が発生すると思います。

キャンバスの幅と高さを別の方法で受け取るにはどうすればよいですか？

私は何か提案をいただきありがとうございます。

Answer 1

キャンバスは特別です幅と高さの場合は

canvas.style.widthとcanvas.style.heightは、ページに表示されるキャンバスの幅と高さを定義します。

canvas.widthおよびcanvas.heightプロパティは、キャンバスのサイズをピクセル単位またはキャンバスの解像度で定義します。キャンバスの解像度はキャンバスの表示サイズと必ずしも一致しません。

widthとheightプロパティを取得するだけでキャンバス解像度を取得できます。

var width = canvas.width; 
var height = canvas.height; 

キャンバス解像度はそれほど直接Numberに変換することができる端部に任意の単位を持っていないであろう。 canvas.widthとcanvas.heightのプロパティは常にピクセル単位です。あなたは150

でキャンバスの解像度は300がデフォルトになりますcanvas.widthとcanvas.heightプロパティを設定しない場合

あなたはcontext.canvasプロパティを使用して、2Dコンテキストのキャンバスにアクセスすることができます。コンテキストにはwidthプロパティとheightプロパティはありません。

// get resolution 
var width = ctx.canvas.width; 
var height = ctx.canvas.height; 

// get display size. Note values will have units eg px,em,% 
var displayWidth = ctx.canvas.style.width; 
var displayHeight = ctx.canvas.style.height; 

ああ、コメントに指摘されています。スタイル属性は、設定されている場合にのみ使用できます。

Answer 2

、あなたのスタイル属性を使用して、キャンバスの幅と高さを設定しておりますので、あなたはこのように、その目に見える幅と高さを取得することができますが...

var ctx = document.getElementById("ctx").getContext("2d"); 
 

 
var canvas_width = ctx.canvas.clientWidth; 
 
var canvas_height = ctx.canvas.clientHeight; 
 

 
console.log(canvas_width, canvas_height);

<canvas id="ctx" style="height: calc(100vh - 142px); width: 100vw; display: block; border: 1px solid black;"></canvas>