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

Ответ 1

Возможно, стоит посмотреть учебник: Учебник по холсту Firefox

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

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

Контекст - это объект, который вы получаете из холста, чтобы вы могли рисовать его.

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

Объект контекста позволяет вам манипулировать холстом; вы можете рисовать прямоугольники, например, и многое другое.

Если вы хотите получить ширину и высоту, вы можете просто использовать стандартные атрибуты HTML width и height:

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

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

Ответ 5

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

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

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

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

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

Ответ 6

Никто из них не работал для меня. Попробуй это.

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

Ответ 7

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

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