It is built by Grant Skinner and can be found here…
First download EaselJS and find the easel.js file (it should be in the lib folder) and install that in the directory of your choice. Then create a new html file and open it up. I will be creating html5 pages, and using the canvas tag, so all my animation and drawing will be done within a canvas tag with the id of canvas. For today’s post I will just create some text and insert it into my element, but in further posts I will bring in graphics and start to animate them. Bear in mend that EaselJS is built to deliberately mimic (loosely) ActionScript’s display list.
Within your html page link to the easel.js file…
Within your html add the following…
<canvas id=“canvas” width=“1024″ height=“768″></canvas>
Now, when I first started playing around with this, I initially put a css rule like so…
…and I left out the inline styling. This had the unfortunate effect of scaling all the canvas elements and making them look awful. So put your width and height inline and your objects will display fine.
Once you have set your html page you just have to write something like…
var canvas = document.getElementById(“canvas”);
var text = new Text(“Hello!”,”bold 12pt Courier”,”#fff”);
var stage = new Stage(canvas);
text.y = 50.5;
text.x = 10.5;
This function I called from the body using onload…
…and here is the result…
Nothing complicated, but very easy to create. Just a couple of points though…
1] We are creating pixels, not vectors
2] As a result this is not text, it is not selectable and they are not objects that we can control – it is just one block of pixels.
As you can see the Text object has three [optional] arguments – the text to display, the font to display, and the colour to use. What is nice is that you can use standard CSS for the font and colour arguments. Once you have set up the Text object, just create a stage, and pass it the canvas id, telling EaselJS that the stage is the canvas element. Once all that is done you display the Text object by using addChild(). The stage before means add the child to the stage, and within the parentheses is the object to add, our text object. Obviously you can do this multiple times and you can also position the text object by using its x and y properties.
In the next post of this series I will show you how to load graphics into the canvas element and animate them.