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:
