width y height en canvas

[oms02]

Hola a todos.

Vereis, estoy haciendo un gráfico con canvas y me he encontrado con una "característica" un tanto 'peculiar'.

Defino los estilos (concretamente el ancho y alto) desde un css (vinculado), pero me encuentro con que no responde bien lo que hago con lo que se ve en el grafico.

Después de un buen rato me da por poner directamente el width/height en la etiqueta canvas y me encuentro con que el gráfico de repente sale genial. Ya mosqueado, me da por mirar en el API de HTML5 y me encuentro con esto:

height: Establece la altura del CANVAS. Si no se establece un valor se le asigna 150px.
width: Establece el ancho del CANVAS. Si no se especifica por defecto se le asigna 300px.

que es justamente lo que me estaba pasando.

Lo cual me lleva preguntarme...es obligatorio que se definan estos dos atributos exclusivamente en la etiqueta?? cómo es posible que no se puedan definir a traves de un css?? Hay alguna manera de hacerlo??

es que me ha dejado KO

Un saludo y gracias por vuestra atención.

[ryugen]

De acuerdo con la especificación: http://www.w3.org/TR/2011/WD-html5-2...canvas-element

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:

$('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

[oms02]

Perfecto ryugen.

Muchas gracias!