Tamanho do Canvas HTML5 via CSS versus atributos do elemento

Não entendo porque os seguintes códigos produzem resultados diferentes, porque o CSS dimensionaria a canvas à medida que ela fosse ampliada,

 #canvas { width: 800px; height: 600px; }   

Em contraste com esta abordagem (que funciona como esperado):

  

A explicação está aqui: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width como visto em outro post, obrigado!

As dimensões intrínsecas do elemento canvas são iguais ao tamanho do espaço de coordenadas, com os números interpretados em pixels CSS. No entanto, o elemento pode ser dimensionado arbitrariamente por uma folha de estilos. Durante a renderização, a imagem é dimensionada para se ajustar a esse tamanho de layout .

Pense no que acontece se você tiver um JPG de 32×32 (ele tem exatamente 1024 pixels no total), mas especifique via CSS que ele deve aparecer como width:800px; height:16px width:800px; height:16px . O mesmo se aplica ao HTML Canvas:

  • Os atributos width e height do próprio elemento canvas determinam quantos pixels você pode desenhar. Se você não especificar a altura e a largura do elemento da canvas, então, as especificações :
    “o atributo width é padronizado para 300 e o atributo height para 150.”

  • As propriedades CSS de width e height controlam o tamanho que o elemento exibe na canvas. Se as dimensões CSS não estiverem definidas, o tamanho intrínseco do elemento será usado para o layout.

Se você especificar em CSS um tamanho diferente das dimensões reais da canvas, ela deverá ser esticada e comprimida pelo navegador, conforme necessário para exibição. Você pode ver um exemplo disso aqui: http://jsfiddle.net/9bheb/5/