examples/Text_multiline.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Multi-line text</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var stage;
	function init() {
		stage = new createjs.Stage("testCanvas");

		var txt = new createjs.Text("", "18px Arial", "#111");

		txt.text = "This wrapped multi-line text is rendered using the Text Object.\n\n";
		txt.text += "Text is fairly limited in canvas and EaselJS. It's fine for simple labels, titles, and HUD elements. You are limited to a single style per Text object, and the text is not selectable, editable, or accessible.\n\n";
		txt.text += "For more complicated text, you can use DOMElement to include HTML text in your display list. It's also worth taking a look at BitmapText for visually rich text for games or similar scenarios.\n\n";
		txt.text += "Text line heights & bounds are approximated, but accurate enough for most uses (for example, the grey background on this text).";

		txt.lineWidth = 550;
		txt.lineHeight = 22;
		txt.textBaseline = "top";
		txt.textAlign = "left";
		txt.y = 50;
		txt.x = (stage.canvas.width - 550) / 2;
		stage.addChild(txt);

		// use getBounds to dynamically draw a background for our text:
		var bounds = txt.getBounds();
		var pad = 10;
		var bg = new createjs.Shape();
		bg.graphics.beginFill("#ABC").drawRect(txt.x - pad + bounds.x, txt.y - pad + bounds.y, bounds.width + pad * 2, bounds.height + pad * 2);
		stage.addChildAt(bg, 0);

		stage.update();
	}
</script>
</head>
<body onload="init()">

<header class="EaselJS">
	<h1>Multi-line Text</h1>

	<p>Shows multi-line text and text wrapping with <code>Text</code> elements.
		It also uses <code>DisplayObject.getBounds()</code> to draw a background
		for the text.</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>