Foros del Web » Creando para Internet » HTML »

width y height en canvas

Estas en el tema de width y height en canvas en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/04/2013, 13:11
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 9 años, 1 mes
Puntos: 11
width y height en canvas

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:

Cita:
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.
  #2 (permalink)  
Antiguo 21/04/2013, 13:29
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 11 años
Puntos: 187
Respuesta: width y height en canvas

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
  1. $('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
  #3 (permalink)  
Antiguo 25/04/2013, 01:48
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 9 años, 1 mes
Puntos: 11
Respuesta: width y height en canvas

Perfecto ryugen.

Muchas gracias!

Etiquetas: canvas, css, etiqueta, height, html5, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:32.