Filling a canvas form with text

I am trying to figure out how to add text to the canvas form for example, here is my 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(); 

I would really appriciate it if someone helped me add text to the form thanks in advance.

EDIT I understand that I need to write on the canvas again, so this is what I got so far ... but the text does not snap to the center of the circle:

  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);
+3
source share
1 answer

As you can see here:

http://jsfiddle.net/DKcpS/

Text begins to be drawn, starting at the center of the circle, and starts at the top of the text, as you put textBaselinein top.

This is the same text, oriented roughly using the width and height of the text:

http://jsfiddle.net/DKcpS/1/

, context.measureText(theTextToMeasure), textMetrics, width. , , .

+9

All Articles