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