A canvas é esticada ao usar CSS, mas normal com propriedades de “largura” / “altura”

Parece que os atributos width e height determinam a largura ou a altura do sistema de coordenadas da canvas, enquanto as propriedades CSS apenas determinam o tamanho da checkbox na qual ele será mostrado.

Isso é explicado em http://www.whatwg.org/html#attr-canvas-width (precisa de JS) ou http://www.whatwg.org/c#attr-canvas-width (provavelmente comerá seu computador) :

O elemento canvas possui dois atributos para controlar o tamanho do bitmap do elemento: width e height . Esses atributos, quando especificados, devem ter valores que sejam números inteiros não negativos válidos . As regras para analisar números inteiros não negativos devem ser usadas para obter seus valores numéricos. Se um atributo estiver faltando ou se a análise de seu valor retornar um erro, o valor padrão deverá ser usado. O atributo width padronizado para 300 e o atributo height para 150.

Para definir a width e a height você precisa, você pode usar

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

Para elementos , as regras CSS de width e height definem o tamanho real do elemento de canvas que será desenhado para a página. Por outro lado, os atributos HTML de width e height definem o tamanho do sistema de coordenadas ou ‘grid’ que a API de canvas usará.

Por exemplo, considere isto ( 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; } 

A canvas será esticada se você definir a largura e a altura do seu CSS. Se você quiser manipular dinamicamente a dimensão da canvas, use o JavaScript da seguinte forma:

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

O navegador usa a largura e a altura do CSS, mas o elemento da canvas é dimensionado com base na largura e na altura da canvas. Em javascript, leia a largura e a altura do CSS e defina a largura e a altura da canvas para isso.

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

Correção Shannimal

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

Se você quiser um comportamento dynamic baseado em, por exemplo, consultas de mídia CSS, não use atributos de largura e altura da canvas. Use regras CSS e, em seguida, antes de obter o contexto de renderização de canvas, atribua a largura e altura aos atributos os estilos de largura e altura CSS:

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