Tamaño del canvas HTML5 a través de CSS frente a los atributos del elemento

No entiendo por qué las siguientes piezas de código producen resultados diferentes, porque css escalaría el canvas a medida que se ampliaba,

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

En contraste con este enfoque (que funciona como se esperaba):

  

La explicación está aquí: http://www.whatwg.org/specs/web-apps/current-work/multipage/the- canvas-element.html#attr-canvas- width como se ve en otra publicación, ¡gracias!

Las dimensiones intrínsecas del elemento canvas son iguales al tamaño del espacio de coordenadas, con los números interpretados en píxeles CSS. Sin embargo, el elemento puede ser clasificado arbitrariamente por una hoja de estilos. Durante el procesamiento, la imagen se escala para ajustarse a este tamaño de diseño .

Piense en lo que sucede si tiene un JPG de 32×32 (tiene exactamente 1024 píxeles en total) pero especifica a través de CSS que debe aparecer como width:800px; height:16px width:800px; height:16px . Lo mismo se aplica a HTML Canvas:

  • Los atributos de width y height del elemento de canvas en sí deciden cuántos píxeles puede dibujar. Si no especifica el alto y el ancho del elemento canvas, entonces según las especificaciones :
    “el atributo de ancho predeterminado es 300 y el atributo de alto predeterminado es 150.”

  • Las propiedades CSS de width y height controlan el tamaño que el elemento muestra en la pantalla. Si las dimensiones CSS no están establecidas, el tamaño intrínseco del elemento se usa para el diseño.

Si especifica en CSS un tamaño diferente de las dimensiones reales del canvas, el navegador debe estirarlo y aplastarlo según sea necesario para su visualización. Puede ver un ejemplo de esto aquí: http://jsfiddle.net/9bheb/5/