Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

65 lines (53 sloc) 2.918 kB
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Multi-line text</title>
<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries. -->
var stage;
function init() {
stage = new createjs.Stage(document.getElementById("testCanvas"));
var txt = new createjs.Text("", "17px Arial", "#FFF");
txt.text = "This text is rendered in canvas using the Text Object:\n\n";
txt.text += "The API is loosely based on Flash's display list, and should be easy to pick up for both JS and AS3 developers. The key classes are:\n\n";
txt.text += "DisplayObject\nAbstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.\n\n"
txt.text += "Stage\nThe root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.\n\n";
txt.text += "Container\nA nestable display container, which lets you aggregate display objects and manipulate them as a group.\n\n";
txt.text += "Text\nRenders text in the context of the display list."
txt.lineWidth = 800;
txt.textBaseline = "top";
txt.textAlign = "left";
txt.y = 50;
txt.x = 30;
// use lineWidth and getMeasuredHeight to dynamically draw a background for our text:
var pad = 10;
var bg = new createjs.Shape();"#114").drawRect(txt.x-pad, txt.y-pad, txt.lineWidth+pad*2, txt.getMeasuredHeight()+pad*2);
<body onload="init()">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Bitmap Animation</h1>
<p>Simple sample showing multi-line text and text wrapping with <strong>Text</strong> elements.</p>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
Jump to Line
Something went wrong with that request. Please try again.