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

Tengo 2 lienzos, uno usa atributos HTML width y height para 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 300×300.

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

parece que el width y height los atributos determinan 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 el Especificación HTML:

El canvas El elemento tiene dos atributos para controlar el tamaño del mapa de bits del elemento: width y height. Estos atributos, cuando se especifican, deben tener valores que son enteros no negativos válidos. El reglas para analizar enteros no negativos deben utilizarse para obtener sus valores numéricos. Si falta un atributo, o si el análisis de su valor devuelve un error, entonces se debe usar el valor predeterminado en su lugar. El width atributo por defecto es 300, y el height el atributo predeterminado es 150.

Para configurar el width y height en un lienzo, puede usar:

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

Para <canvas> elementos, las reglas CSS para width y height establezca el tamaño real del elemento del lienzo que se dibujará en la página. Por otro lado, los atributos HTML de width y height establezca 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>

En ambos se ha dibujado lo mismo en relación con las coordenadas internas del elemento canvas. Pero en el segundo lienzo, el rectángulo rojo tendrá el doble de ancho porque el lienzo en su conjunto se estira en un área más grande según las reglas de CSS.

Nota: Si las reglas CSS para width y/o height no se especifican, entonces el navegador usará los atributos HTML para dimensionar el elemento de manera que 1 unidad de estos valores sea igual a 1 px en la página. Si estos atributos no se especifican, se establecerán de forma predeterminada en un width de 300 y un height de 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 así:

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 lienzo se escala según el ancho y el alto del lienzo. En javascript, lea el ancho y alto de css y establezca el ancho y alto del lienzo en eso.

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

Shannimal corrección

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

Canvas representa la imagen por búfer, por lo que cuando especifica los atributos HTML de ancho y alto, el tamaño y la longitud del búfer cambian, pero cuando usa CSS, el tamaño del búfer no cambia. Haciendo la imagen estirada.

Uso de tamaño HTML.

Se cambia el tamaño del lienzo -> se cambia el tamaño del búfer -> renderizado

Usando el tamaño de CSS

Se cambia el tamaño del lienzo -> renderizado

Dado que la longitud del búfer se mantiene sin cambios, cuando el contexto representa la imagen, la imagen se muestra en un lienzo redimensionado (pero renderizado en un búfer sin cambios).