Холст растягивается при использовании CSS, но нормальный с свойствами "ширина" / "высота"

У меня есть 2 холста, один использует атрибуты HTML width и height для его размера, а другой использует CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 отображается как должно, но не compteur2. Содержимое рисуется с использованием JavaScript на холсте 300x300.

Почему существует разница в показаниях?

Ответ 1

Кажется, что атрибуты width и height определяют ширину или высоту системы координат холста, тогда как свойства CSS определяют размер окна, в котором он будет отображаться.

Это объясняется в http://www.whatwg.org/html#attr-canvas-width (требуется JS) или http://www.whatwg.org/c#attr-canvas-width (вероятно, будет есть ваш компьютер):

Элемент canvas имеет два атрибута для управления размером растрового изображения элемента: width и height. Эти атрибуты, если они указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами. Правила для анализа неотрицательных целых чисел должны использоваться для получения их числовых значений. Если атрибут отсутствует или разбор его значения возвращает ошибку, вместо этого следует использовать значение по умолчанию. Атрибуту width по умолчанию соответствует 300, а атрибуту height по умолчанию соответствует 150.

Ответ 2

Чтобы установить width и height, вам нужно использовать

canvasObject.setAttribute('width', '475');

Ответ 3

Для элементов <canvas> правила CSS для width и height устанавливают фактический размер элемента canvas, который будет нарисован на странице. С другой стороны, атрибуты HTML width и height устанавливают размер системы координат или сетки, которые будет использовать API-интерфейс canvas.

Например, рассмотрим это (jsfiddle):

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Ответ 4

Холст будет растянут, если вы установите ширину и высоту в CSS. Если вы хотите динамически манипулировать размером холста, вы должны использовать JavaScript следующим образом:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

Ответ 5

Браузер использует ширину и высоту css, но элемент холста масштабируется на основе ширины и высоты холста. В javascript читайте ширину и высоту css и задайте ширину и высоту холста.

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Ответ 6

Коррекция ланномания

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

Ответ 7

Если вы хотите динамическое поведение, основанное на, например, CSS-медиа-запросы, не используйте атрибуты ширины и высоты холста. Используйте правила CSS, а затем, прежде чем получить контекст рендеринга canvas, присвойте атрибутам width и height стилям ширины и высоты CSS:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...