Для <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>
Для них обох було намальовано одне і те ж щодо внутрішніх координат елемента полотна. Але у другому полотні червоний прямокутник буде вдвічі ширшим, оскільки полотно в цілому розтягується на більшу площу за правилами CSS.
Примітка: Якщо правила CSS для width
та / або height
не вказані, браузер використовуватиме атрибути HTML для розміру елемента таким чином, що 1 одиниця цих значень дорівнює 1 пікселів на сторінці. Якщо ці атрибути не вказані , то вони будуть по замовчуванням до width
про 300
і height
про 150
.