HTML5キャンバスの幅と高さを取得するにはどうすればよいですか？

JavaScriptでキャンバス要素の幅と高さを取得するにはどうすればよいですか？

また、私が読み続けているキャンバスの「コンテキスト」は何ですか？

チュートリアルを見る価値があるかもしれません：Firefox Canvasチュートリアル

要素のプロパティにアクセスするだけで、キャンバス要素の幅と高さを取得できます。例えば：

var canvas = document.getElementById('mycanvas');
var width = canvas.width;
var height = canvas.height;

幅と高さの属性がcanvas要素に存在しない場合、デフォルトの300x150サイズが返されます。正しい幅と高さを動的に取得するには、次のコードを使用します。

const canvasW = canvas.getBoundingClientRect().width;
const canvasH = canvas.getBoundingClientRect().height;

または、より短いオブジェクト破壊構文を使用します。

const { width, height } = canvas.getBoundingClientRect();

contextあなたは、あなたがそれに描画できるように、キャンバスから取得したオブジェクトです。contextは、キャンバス要素への描画を可能にするコマンドを提供するキャンバスのAPI と考えることができます。

さて、以前のすべての答えは完全に正しいわけではありません。主要なブラウザのうち2つは、これら2つのプロパティをサポートしていないか（IEはそのうちの1つです）、使用方法が異なります。

より良い解決策（ほとんどのブラウザーでサポートされていますが、Safariを確認していません）：

var canvas = document.getElementById('mycanvas');
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;

少なくとも、scrollWidthと-Heightで正しい値を取得し、サイズを変更するときにcanvas.widthとheightを設定する必要があります。

言及した回答canvas.widthは、キャンバスの内部寸法、つまり要素の作成時に指定された寸法を返します。

<canvas width="500" height="200">

CSSでキャンバスのサイズを変更する場合、そのDOM寸法には.scrollWidthおよびを介してアクセスできます.scrollHeight。

var canvasElem = document.querySelector('canvas');
document.querySelector('#dom-dims').innerHTML = 'Canvas DOM element width x height: ' +
      canvasElem.scrollWidth +
      ' x ' +
      canvasElem.scrollHeight

var canvasContext = canvasElem.getContext('2d');
document.querySelector('#internal-dims').innerHTML = 'Canvas internal width x height: ' +
      canvasContext.canvas.width +
      ' x ' +
      canvasContext.canvas.height;

canvasContext.fillStyle = "#00A";
canvasContext.fillText("Distorted", 0, 10);

<p id="dom-dims"></p>
<p id="internal-dims"></p>
<canvas style="width: 100%; height: 123px; border: 1px dashed black">

コンテキストオブジェクトを使用すると、キャンバスを操作できます。たとえば、四角形などを描画できます。

幅と高さを取得したい場合は、標準のHTML属性widthとを使用するだけですheight：

var canvas = document.getElementById( 'yourCanvasID' );
var ctx = canvas.getContext( '2d' );

alert( canvas.width );
alert( canvas.height ); 

（？メジャー）今、すべてのブラウザがALOWように見える2015を起動c.widthし、c.heightキャンバスを取得するために内部の大きさを、しかし：

キャンバスは原則として2つの異なる/独立したサイズを持っているため、回答としての質問は誤解を招くものです。

「html」は、CSSの幅/高さおよび独自の（属性-）幅/高さを言うことができます

さまざまなサイズのこの短い例を見てください。ここでは、200/200のキャンバスを300/100のhtml要素に入れています。

ほとんどの例（私が見たすべて）ではcss-sizeが設定されていないため、（drawing-）キャンバスサイズの幅と高さが暗示されます。しかし、これは必須ではなく、サイズを間違えると、面白い結果が得られる可能性があります。内部配置用のcss widht / height。

それらのどれも私のために働いていません。これを試して。

console.log($(canvasjQueryElement)[0].width)

次に、canvas.height / width、CSSの高さ/幅、およびコンテキストを使用して、キャンバスを任意のサイズで正しくレンダリングするCodePenを示します。

HTML：

<button onclick="render()">Render</button>
<canvas id="myCanvas" height="100" width="100" style="object-fit:contain;"></canvas>

CSS：

canvas {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  display: block;
}

JavaScript：

const myCanvas = document.getElementById("myCanvas");
const originalHeight = myCanvas.height;
const originalWidth = myCanvas.width;
render();
function render() {
  let dimensions = getObjectFitSize(
    true,
    myCanvas.clientWidth,
    myCanvas.clientHeight,
    myCanvas.width,
    myCanvas.height
  );
  myCanvas.width = dimensions.width;
  myCanvas.height = dimensions.height;

  let ctx = myCanvas.getContext("2d");
  let ratio = Math.min(
    myCanvas.clientWidth / originalWidth,
    myCanvas.clientHeight / originalHeight
  );
  ctx.scale(ratio, ratio); //adjust this!
  ctx.beginPath();
  ctx.arc(50, 50, 50, 0, 2 * Math.PI);
  ctx.stroke();
}

// adapted from: https://www.npmjs.com/package/intrinsic-scale
function getObjectFitSize(
  contains /* true = contain, false = cover */,
  containerWidth,
  containerHeight,
  width,
  height
) {
  var doRatio = width / height;
  var cRatio = containerWidth / containerHeight;
  var targetWidth = 0;
  var targetHeight = 0;
  var test = contains ? doRatio > cRatio : doRatio < cRatio;

  if (test) {
    targetWidth = containerWidth;
    targetHeight = targetWidth / doRatio;
  } else {
    targetHeight = containerHeight;
    targetWidth = targetHeight * doRatio;
  }

  return {
    width: targetWidth,
    height: targetHeight,
    x: (containerWidth - targetWidth) / 2,
    y: (containerHeight - targetHeight) / 2
  };
}

基本的に、canvas.height / widthは、レンダリングするビットマップのサイズを設定します。次に、CSSの高さ/幅は、ビットマップをレイアウトスペースに合うように拡大縮小します（拡大縮小すると、多くの場合、ワープされます）。その後、コンテキストは、ベクトル操作を使用して、異なるサイズで描画するようにスケールを変更できます。

キャンバスがIDなしのコンテナーの中にあったため問題が発生したため、以下のjqueryコードを使用しました

$('.cropArea canvas').width()