Canvas растягивается при использовании CSS, но обычно со свойствами "width" / "height"

Question

У меня есть 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.

Почему разница в отображении?

Answer 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.

Answer 2

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

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

Answer 3

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

Например, рассмотрим это ( 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>

На обоих нарисовано одно и то же относительно внутренних координат элемента canvas. Но на втором холсте красный прямоугольник будет в два раза шире, потому что холст в целом растягивается по большей площади по правилам CSS.

Примечание. Если правила CSS для width и / или height не указаны, браузер будет использовать атрибуты HTML для определения размера элемента таким образом, чтобы 1 единица этих значений равнялась 1 пикселю на странице. Если эти атрибуты не указаны, то по умолчанию они будут width из 300 и height из 150.

Answer 4

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

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

Answer 5

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

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

Answer 6

Shannimal коррекция

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

Answer 7

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

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

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

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