El lienzo se estira cuando se usa CSS pero es normal con las propiedades "ancho" / "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?

Parece que los atributos widthy heightdeterminan el ancho o la altura 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 http://www.whatwg.org/html#attr-canvas-width (necesita JS) o http://www.whatwg.org/c#attr-canvas-width (probablemente se comerá su computadora) :

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 . Las reglas para analizar enteros no negativos deben usarse para obtener sus valores numéricos. Si falta un atributo o si el análisis de su valor devuelve un error, se debe utilizar el valor predeterminado. El widthatributo predeterminado es 300 y el heightatributo predeterminado es 150.

Para configurar widthy heightque necesita, puede usar

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

Para los <canvas>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 de 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>

A ambos se les ha dibujado lo mismo en relación con las coordenadas internas del elemento de lienzo. Pero en el segundo lienzo, el rectángulo rojo tendrá el doble de ancho porque las reglas de CSS extienden el lienzo como un todo en un área más grande.

Nota: Si las reglas CSS para widthy / o heightno se especifican, el navegador usará los atributos HTML para dimensionar el elemento de manera que 1 unidad de estos valores sea igual a 1px en la página. Si no se especifican estos atributos, los valores predeterminados serán a widthde 300y a heightde 150.

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

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

El navegador utiliza el ancho y el alto del CSS, pero el elemento del lienzo se escala según el ancho y el alto del lienzo. En javascript, lea el ancho y alto de css y configure el ancho y alto del lienzo para eso.

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

Corrección de Shannimal

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

CSS establece el ancho y la altura del elemento de lienzo para que afecte el espacio de coordenadas dejando todo dibujado torcido

Este es mi camino sobre cómo establecer el ancho y la altura con Vanilla JavaScript

canvas.width = numberForWidth

canvas.height = numberForHeight

Si desea un comportamiento dinámico basado en, por ejemplo, consultas de medios CSS, no use atributos de ancho y alto de lienzo. Utilice las reglas de CSS y luego, antes de obtener el contexto de representación del lienzo, asigne a los atributos de ancho y alto 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");
...