Text

Contact Us or call 1-877-932-8228
Text

Text

There are two methods for adding text to the canvas:

  1. fillText(text,x,y) - adds "solid" text at the x,y position.
  2. strokeText(text,x,y) - adds "hollow" text at the x,y position.

Text Properties

You can set the following text properties:

  1. font - uses the same syntax as the CSS font property: font-style font-variant font-weight font-size/line-height font-family
  2. textAlign - possible values are "start," "end," "left," "right," and "center."
  3. textBaseline - possible values are "top," "hanging," "middle," "alphabetic," "ideographic," and "bottom."

The measureText(text) method returns an object containing text metrics. Presumably, metrics will be added, but currently it only has one property: width. So, to see how wide some text would be in the current font, you would do this:

var width = context.measureText(text).width

Take a look at the following example:

Code Sample:

html5-canvas/Demos/text.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	if (canvas.getContext) {
		var context = canvas.getContext("2d");
		context.fillStyle="red";
		context.strokeStyle="blue";
		
		context.font = "italic small-caps bold 44pt 'Comic Sans MS'";
		context.textAlign = "left";
		context.strokeText("Hello",10,100);
		context.fillText("World!",10+context.measureText("Hello ").width,100);
	}
---- C O D E   O M I T T E D ----

Next