El canvas se estira al usar CSS pero es normal con propiedades de “ancho” / “alto”

Tengo 2 canvass, uno usa atributos HTML de width y height para ajustarlo, y el otro usa CSS:

   

Compteur1 muestra como debería, pero no compteur2. El contenido se dibuja usando JavaScript en un canvas de 300×300.

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

texto alternativo

Parece que los atributos de width y height determinan el ancho o alto del sistema de coordenadas del canvas, mientras que las propiedades de CSS solo determinan el tamaño del cuadro en el que se mostrará.

Esto se explica en http://www.whatwg.org/html#attr-canvas-width (necesita JS) o http://www.whatwg.org/c#attr-canvas-width (probablemente se coma su computadora) :

El elemento canvas tiene dos atributos para controlar el tamaño del bitmap del elemento: width y height . Estos atributos, cuando se especifiquen, deben tener valores que sean enteros válidos no negativos . Las reglas para analizar enteros no negativos se deben usar para obtener sus valores numéricos. Si falta un atributo, o si al analizar su valor devuelve un error, se debe usar el valor predeterminado en su lugar. El atributo width predeterminado en 300, y el atributo height predeterminado en 150.

Para establecer el width y la height que necesita, puede usar

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

Para elementos , las reglas de CSS para width y height establecen el tamaño real del elemento canvas que se dibujará en la página. Por otro lado, los atributos HTML de width y height establecen el tamaño del sistema de coordenadas o “cuadrícula” que usará la API de canvas.

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; } 
   

El canvas se alargará si establece el ancho y alto en su CSS. Si desea manipular dinámicamente la dimensión del canvas, debe usar JavaScript de esta manera:

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

El navegador usa el ancho y el alto del CSS, pero el elemento del canvas se escala en función del ancho y el alto del canvas. En javascript, lea el ancho y alto de css y configure el ancho y la altura del canvas.

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

Corrección Shanimal

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

Si desea un comportamiento dynamic basado, por ejemplo, en consultas de medios CSS, no utilice atributos de ancho y alto de canvas. Use las reglas de CSS y luego, antes de obtener el contexto de representación de canvas, asigne atributos de ancho y alto a los estilos de ancho y alto de CSS:

 var elem = document.getElementById("mycanvas"); elem.width = elem.style.width; elem.height = elem.style.height; var ctx1 = elem.getContext("2d"); ...