[SOLUCIONADO] Canvas: problemas con el resultado

[xinxan22]

Buenos días,

es la primera vez que uso <canvas> y me pasan cosas extrañas:



1.- Hago un rectangulo en gris y otro en verde y se muestra uno en negro y el otro en gris
2.- La etiqueta canvas me hace un height demasiado grande el cual no he indicado.
3.- En el caso de poner un height y width en la etiqueta canvas, el rectangulo se redimensiona independientemente de "context.fillRect(...".





Código css:

Código HTML:

#vr_grafico{
  border: 1px solid #CCC;
  border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px; 
  width: 100%; 
}
#id_vr_myCanvas{
  background: peru;
}

Código html 5:

Código HTML:

<div id="vr_grafico">
	<canvas id="id_vr_myCanvas"></canvas>
</div> 

Código javascript:

Código HTML:

$(document).on("ready", inicio);

function inicio(){

  canvas  = document.getElementById("id_vr_myCanvas");
  context = canvas.getContext("2d");

  //Dibujo un rectangulo gris
  context.fillRect(10, 10, 100, 50);
  context.fillStyle = "#CCC";

  //Dibujo otro rectangulo verde
  context.fillRect(100, 10, 100, 50);
  context.fillStyle = "#16A765";

}

Resultado:

[Tecna]

Buenas,

1.- Estás pintando el rectángulo antes de definir el color, por eso el primero se pinta en negro que es el color por defecto, el segundo se pinta del primer color que defines y el segundo color que defines no se usa para nada porque no dibujas nada después de cambiarlo. Tienes que definir todas las propiedades que quieras aplicar antes de dibujar en el canvas.

2.- El objeto canvas tiene asignado unos valores por defecto para las coordenadas de referencia que son 300 de ancho y 150 de alto (sin unidad) y el navegador lo renderiza en pixeles si no se define otro valor.

3.- Si cambias el tamaño del elemento mediante CSS no estás cambiando esas propiedades del objeto, sólo su apariencia, hay que cambiar también los valores de referencia de las coordenadas mediante las propiedades del objeto con javascript. Para que las transformaciones sean más sencillas lo más fácil es ajustarlo al tamaño de la ventana, no hay que olvidar que los píxeles no siempre son cuadrados.

No se si es lo que buscas pero el segundo rectángulo está montado sobre el primero, debería empezar en 110 o el primero tener 90 de ancho a no ser que quieras jugar con superposiciones y transparencias.

[xinxan22]

Gracias por responder y la verdad si que me sirve.

He hecho modificaciones y todavía no lo he conseguido.

He modificado el css poniendo el height: 70px;

Código HTML:

#vr_grafico{
  border: 1px solid #CCC;
  border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px; 
  width: 100%; 
}
#id_vr_myCanvas{
  background: peru;
height: 70px;
}

El código javascript para que primero haga el color y luego el rectangulo:

Código HTML:

$(document).on("ready", inicio);

function inicio(){

  canvas  = document.getElementById("id_vr_myCanvas");
  context = canvas.getContext("2d");

  //Dibujo un rectangulo gris
  context.fillStyle = "#CCC";
  context.fillRect(10, 10, 100, 50);

  //Dibujo un rectangulo verde  
  context.fillStyle = "#16A765";
  context.fillRect(110, 10, 100, 50);

}

Ahora los rectángulos se ven muy pequeños.

2 y 3.- Entiendo que cuando dibujo el rectángulo, el 100 y 50 es el width y height que tendrán.
El height: 70px; de la etiqueta canvas es lo que ocupa, así que debería sobrar 10 px por arriba y 10 px por abajo
del rectángulo (porque empiezo en las coordenadas top 10px).

(Tienes razón con el 110, no le sumé los 10 píxeles primeros, aunque esto es una prueba que estoy haciendo. De todas formas, gracias por avisar.)


Resultado:

[Tecna]

Buenas,

no has tenido en cuenta lo que te decía en el punto 3. Si sólo lo cambias con css, el objeto canvas sigue teniendo un tamaño de 300x150 y estás pintando un rectángulo que mide la novena parte del tapiz (100x50) pero no son pixeles es una relación de proporción, que es justo lo que te está pintando pero adaptado a los 300x70 px que has definido con css. Para que midiera 70px de alto tendrías que cambiar el tamaño del elemento (no su estilo) con javascript.

[xinxan22]

Buenas tardes,

y como debería de moficiar el javascript, me puedes ayudar con el ejemplo que estoy haciendo?

Gracias,

saludos

[Tecna]

Buenas,

es tan sencillo como:

Código Javascript:

canvas.height = '70';
 

que no es lo mismo que:

Código Javascript:

canvas.style.height = '70px';
 

[xinxan22]

Ammmsssss eso ya es otra cosa.

Muchas gracias.

Siempre cambiaba el estilo CSS aunque me decías que no era eso. No encontraba en ningún sitio lo del height al objeto canvas.

Alguna recomendación para ver documentación del que permite el objeto canvas (como por ejemplo el height) ?

Saludos