Para <canvas>
elementos, o CSS governa width
e height
define o tamanho real do elemento da tela que será desenhado na página. Por outro lado, os atributos HTML width
e height
definem o tamanho do sistema de coordenadas ou da 'grade' que a API da tela usará.
Por exemplo, considere isso ( 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>
Ambos tiveram a mesma coisa desenhada em relação às coordenadas internas do elemento canvas. Mas na segunda tela, o retângulo vermelho terá o dobro da largura porque a tela como um todo está sendo esticada por uma área maior pelas regras do CSS.
Nota: Se as regras de CSS para width
e / ou height
não forem especificadas, o navegador usará os atributos HTML para dimensionar o elemento, de modo que 1 unidade desses valores seja igual a 1px na página. Se esses atributos não forem especificados, eles serão padronizados como a width
de 300
e a height
de 150
.