Canvas se estira cuando se usa CSS pero normal con propiedades" width " / "height"

Para establecer el width y height que necesita, puede usar

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

Para los elementos <canvas>, las reglas 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 'grid' que utilizará la API 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;
}

<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 han dibujado la misma cosa en relación con las coordenadas internas del elemento canvas. Pero en el segundo lienzo, el rectángulo rojo será el doble de ancho porque el lienzo en su conjunto se estira a través de un área más grande por las reglas CSS.

Nota: Si no se especifican las reglas CSS para width y/o height, el navegador utilizará los atributos HTML para dimensionar el elemento de manera que 1 unidad de estos valores sea igual a 1px en la página. Si estos atributos no se especifican, entonces tendrán por defecto un width de 300 y un height de 150.

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

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

El navegador utiliza el ancho y el alto de css, pero el elemento canvas se escala en función del 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();

Corrección Shannimal

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

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

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...