Text is probably used in most things we build. Larger text masses might be better added through normal HTML, because of accessibility and such. Other texts could be just part of your app and doesn't necessarily need to be accessible in the same way. For those purposes, oCanvas includes a text display object. It is very easy to use, and works with fonts the way CSS does. If you want a special font, you can include the @font-face declarations in your CSS code, and the font will be available for use in the text objects, just as it would in a normal HTML context.


align : String
The horizontal alignment of the text. Can be one of the values start, end, left, right and center. Default: start. Since version 2.0.0, this only affects the text content in multi-line text objects. Before that version, the text object actually moved and disturbed the origin of the object.
baseline : String
The vertical alignment of the text. Can be one of the values top, hanging, middle, alphabetic, ideographic or bottom. Since version 2.0.0, all values can be used because they are calculated within oCanvas. Before that version, the normal canvas API values were used internally, and made only some of the values work since the browsers didn't support all of them.
family : String
Works the same as the CSS font-family property.
font : String
Works the same as the CSS font shorthand syntax.
height : Number
Get the calculated height for the current text.
lineHeight : Number or String
The line height relative to the font-size, as a percentage. The value 1 is the same as the font size. As of version 2.3.0, pixel values are supported by specifying a string, in the format "18px".
size : Number
The font size in pixels.
style : String
Works the same as the CSS font-style property.
text : String
The text that will be drawn. Writing \n in this string will create a new line.
variant : String
Works the same as the CSS font-variant property.
weight : String
Works the same as the CSS font-variant property.
width : Number
Get the calculated width for the current text.


Example 1

We start by creating a new core instance. Then we create a text object by specifying the font settings, the text and a fill.

View Example
var canvas = oCanvas.create({
	canvas: "#canvas"

var text = canvas.display.text({
	x: 177,
	y: 107,
	origin: { x: "center", y: "top" },
	font: "bold 30px sans-serif",
	text: "Hello World!",
	fill: "#0aa"