Как получить ширину и высоту холста HTML5?

Как я могу получить ширину и высоту элемента холста в JavaScript?

Кроме того, каков «контекст» холста, о котором я продолжаю читать?

Возможно, стоит посмотреть учебник: Руководство по MDN Canvas.

Вы можете получить ширину и высоту элемента холста, просто получив доступ к этим свойствам элемента. Например:

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

Если атрибуты ширины и высоты отсутствуют в элементе холста, будет возвращен размер по умолчанию 300x150. Чтобы динамически получить правильную ширину и высоту, используйте следующий код:

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

Или используйте более короткий синтаксис деструктуризации объекта:

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

Это contextобъект, который вы получаете с холста, чтобы вы могли рисовать на нем. Вы можете рассматривать его contextкак API холста, который предоставляет вам команды, позволяющие рисовать на элементе холста.

Что ж, все предыдущие ответы не совсем верны. 2 основных браузера не поддерживают эти 2 свойства (IE является одним из них) или используют их по-разному.

Лучшее решение (поддерживается большинством браузеров, но я не проверял Safari):

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

По крайней мере, я получаю правильные значения с scrollWidth и -Height и ДОЛЖЕН установить canvas.width и высоту при изменении размера.

Ответы, в которых упоминается, 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 ); 

теперь, начиная с 2015 года, все (основные?) браузеры, похоже, разрешают c.widthи c.heightполучают внутренний размер холста , но:

вопрос, поскольку ответы неверны, потому что холст в принципе имеет 2 разных / независимых размера.

"Html" позволяет указать ширину / высоту CSS и его собственную (атрибут-) ширину / высоту.

посмотрите на этот короткий пример другого размера , где я поместил холст 200/200 в html-элемент 300/100

В большинстве примеров (все, что я видел) нет набора css-size, поэтому они подразумевают ширину и высоту размера холста (рисования). Но это не обязательно и может дать забавные результаты, если вы возьмете неправильный размер - т.е. css widht / height для внутреннего позиционирования.

Ни один из них не помог мне. Попробуй это.

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

Вот CodePen, который использует canvas.height / width, CSS height / width и context для правильной визуализации любого холста любого размера .

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 масштабирует растровое изображение, чтобы оно соответствовало пространству макета (часто искажая его при масштабировании). Затем контекст может изменять масштаб для рисования с использованием векторных операций в разных размерах.

У меня была проблема, потому что мой холст находился внутри контейнера без идентификатора, поэтому я использовал этот код jquery ниже

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