Filling A Canvas Shape With Text

i am trying to figure out how to add a text to a canvas shape for example here is my Code: var text ='5'; // text to display over the circle context.fillStyle = 'red'; context.begi

Solution 1:

As you can see here:

http://jsfiddle.net/DKcpS/

The text is getting drawn starting in the center of the circle, and starting with the top of the text since you put the textBaseline to top.

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

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

As you can see we have a context.measureText(theTextToMeasure) function that returns a textMetrics object that has a width property. For now it does not have a height one, so we have to sort of guess that.