title: filling a canvas shape with text
body: <p>i am trying to figure out how to add a text to a canvas shape
  for example here is my <strong>Code</strong>:</p>
  
  <pre><code>var text ="5"; // text to display over the circle
  context.fillStyle = "red";
  context.beginPath();
  context.arc(50,70, 10, 0, Math.PI * 2);
  context.closePath();
  context.fill(); 
  </code></pre>
  
  <p>i would very much appriciate it if someone would help me adding the text to the shape
  thanks in advance.</p>
  
  <p><strong>EDIT</strong>
  i figure out that i need to write again on the canvas so this is what i got so far ... but 
  the text doesnt allign to the center of the circle :</p>
  
  <pre><code>  context.fillStyle = "red";
    context.beginPath();
    var radius = 10; // for example
    context.arc(200, 200, radius, 0, Math.PI * 2);
    context.closePath();
    context.fill();
    context.fillStyle = "black"; // font color to write the text with
    var font = "bold " + radius +"px serif";
    context.font = font;
    context.textBaseline = "top";
    context.fillText(text, 200-radius/4 ,200-radius/2);
  </code></pre>