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: