El lienzo se estira cuando se usa CSS pero es normal con los atributos de "ancho" y "alto".

Tengo 2 lienzos, uno usa atributos HTML widthy heightpara dimensionarlo, el otro usa 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 se muestra como debería, pero no compteur2. El contenido se dibuja usando JavaScript en un lienzo de 300x300.

¿Por qué hay una diferencia de visualización?

texto alternativo

Apr 07 '10 03:04 Sirber

Parece que los atributos widthy heightdeterminan el ancho o alto del sistema de coordenadas del lienzo, mientras que las propiedades CSS solo determinan el tamaño del cuadro en el que se mostrará.

Esto se explica en la especificación HTML :

El canvaselemento tiene dos atributos para controlar el tamaño del mapa de bits del elemento: widthy height. Estos atributos, cuando se especifican, deben tener valores que sean enteros no negativos válidos . Se deben utilizar las reglas para analizar números enteros no negativos para obtener sus valores numéricos. Si falta un atributo, o si el análisis de su valor devuelve un error, entonces se debe utilizar el valor predeterminado. El widthatributo por defecto es 300 y el heightatributo por defecto es 150.

Apr 06 '2010 21:04 SamB

Para configurar widthy heighten un lienzo, puede usar:

canvasObject.setAttribute('width', '150');
canvasObject.setAttribute('height', '300');

Mar 16 '2011 05:03 fermar

Para <canvas>los elementos, las reglas CSS widthy heightestablecen el tamaño real del elemento del lienzo que se dibujará en la página. Por otro lado, los atributos HTML de widthy heightestablecen el tamaño del sistema de coordenadas o 'cuadrícula' que utilizará la API del lienzo.

Por ejemplo, considere esto ( 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>

Expandir fragmento

Ambos tienen dibujado lo mismo en relación con las coordenadas internas del elemento del lienzo. Pero en el segundo lienzo, el rectángulo rojo será el doble de ancho porque las reglas CSS estiran el lienzo en su conjunto a lo largo de un área más grande.

Nota: Si las reglas CSS para widthy/o heightno se especifican, el navegador utilizará los atributos HTML para dimensionar el elemento de manera que 1 unidad de estos valores equivalga a 1 px en la página. Si estos atributos no se especifican, el valor predeterminado será a widthof 300y a heightof 150.

Sep 29 '2013 14:09 Ben Jackson

Corrección animal

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

Nov 21 '2015 11:11 XaviGuardia