Text

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.

Properties

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.

Examples

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

Code

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"
});

canvas.addChild(text);

Output