De acuerdo con la especificación:
http://www.w3.org/TR/2011/WD-html5-2...canvas-element Cita: The canvas element has two attributes to control the size of the coordinate space: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.
The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.
The size of the coordinate space does not necessarily represent the size of the actual bitmap that the user agent will use internally or during rendering. On high-definition displays, for instance, the user agent may internally use a bitmap with two device pixels per unit in the coordinate space, so that the rendering remains at high quality throughout.
Los valores de los atributos height y width que definen el tamaño del canvas van separadas a los valores de layout otorgados mediante CSS. En caso de que se seteen estos ultimos el navegador ajustará el contenido del canvas a las dimensiones definidas en el CSS.
Para poder utilizar dimensiones definidas por CSS (sean en px, em o %) lo que yo realizo es mediante script setear estos atributos en el canvas de acuerdo a su tamaño calculado.
Por ejemplo (en jQuery para simplificar):
Código Javascript
:
Ver original$('canvas').attr('width', $('canvas').width());
Para que se entienda:
Si el ancho definido por CSS es 600px y no definí el atributo widht, entonces el tamaño del bitmap del canvas serán 300px pero acomodados en 600px de layout, entonces el navegador hará que cada pixel tenga 2 pixeles de ancho.
Para solucionar esto con un script cuando el documento está listo y ya se conoce el ancho calculado del canvas, seteo el width en 600px que es el ancho calculado en este caso.
Cualquier otra consulta, no dudes en preguntar
Saludos