7 min read

(For more resources related to this topic, see here.)

EaselJS is part of the CreateJS suite, a JavaScript library for building rich and interactive experiences, such as web applications and web-based games that run on desktop and mobile web browsers.

The standard HTML5 canvas’ syntax can be very hard for beginners, especially if you need to animate and draw many objects.

EaselJS greatly simplifies application development in HTML5 canvas using a syntax and an architecture very similar to the ActionScript 3.0 language. As a result, Flash/Flex developers will immediately feel at home, but it’s very easy to learn even if you’ve never opened Flash in your life.

CreateJS is currently supported by Adobe, AOL, and Microsoft, and it’s developed by Grant Skinner, an internationally recognized leader in the field of rich Internet application development.

Thanks to EaselJS, you can easily manage many types of graphic elements (vector shapes, bitmap, spritesheets, texts, and HTML elements) and it also supports touch events, animations, and many other interesting features in order to quickly develop cross-platform HTML5 games and applications, providing a look and feel as well as a behavior very similar to native applications for iOS and Android.

Following are the five reasons to choose EaselJS and HTML5 canvas to build your applications:

  • Cross-platform — Using this technology will help you create HTML5 canvas applications that will be supported from:

    • Desktop browsers such as Chrome, Safari, Firefox, Opera, and IE9+

    • iPhone, iPad, and iPod 4+ (iOS 3.2+)

    • Android smartphones and tablets (OS 2.1+)

    • BlackBerry browser (7.0 and 10.0+)

    • Every HTML5 browser (go to http://caniuse.com/canvas for more information)

    The following screenshot shows how the same application can run on different devices and resolutions:

  • Easy Integration — EaselJS applications run on browsers and finally can be seen by almost every desktop and mobile user without any plugin installed. The HTML5 canvas element behaves just like any other HTML element. It can overlap other elements or become part of an existing HTML page.

    So, your canvas application can fill the entire browser area or just a small part of an existing HTML page. You can create amazing image galleries for your sites, product configurators, microsites, games, and interactive banners, and replicate a lot of features that used to be created with Adobe Flash or Apache Flex.

  • One source code — A single codebase can be used to create a responsive application that works on almost all devices and resolutions. If you’ve ever created a liquid or fluid layout using HTML, Flash, or Flex then you already know this concept.

    As shown in the previous screenshot, you can also adapt UI and change behaviors according to the size of the device being used.

  • No creativity limits — As in Flash, you can now forget HTML DOM compatibility issues. When you display a graphic element using EaselJS, you can be sure it will be placed at the same position in every browser, desktop and mobile (except for texts because every browser uses a different font renderer, and there may be some minor differences between them and of course Internet Explorer 8 and lower versions that do not support HTML5 syntax).

    Furthermore the CreateJS suite includes a lot of additional tools helping developers and designers to create amazing stuff:

    • TweenJS: An useful tween engine to create runtime animations

    • PreloadJS: To load assets and create nice preloaders

    • Zoë: To convert SWF (Adobe Flash native web format) into spritesheets and JSON for EaselJS

    • SoundJS: A library to play sounds (this topic is not covered in this book)

    • CreateJS Toolkit for Flash CS6: To export Flash timeline animations in an EaselJS-compatible format

  • Freedom — Developers can now create and publish games and applications skipping the App Store submission process. Of course, the performance of HTML5 applications are not comparable to those achieved by the native applications but can still be an alternative solution to many needs.

    From a business perspective, it’s a great opportunity because it is now possible to avoid following the Apple guidelines that usually don’t allow publishing applications that are primarily marketing material or advertisements, duplicated applications or applications that are not very useful, or simply websites bundled as applications.

    Users can now have a cool touch experience directly while navigating through a website, avoiding having to download, install, and open a native application.

    Furthermore, developers can also use PhoneGap (http://www.phonegap.com) and many other technologies to convert their HTML applications in native applications for iOS, Android, Windows Phones, BlackBerry, Bada, or WebOS.

After the previous introduction you will be guided through the process of downloading, installing and configuring EaselJS in your local machine (this part of the book is not copied in this article).

The book continues with the traditional “Hello World” example, as shown in the next paragraph:

Quick start — creating your first canvas application

Now we’ll see how to create our first HTML5 canvas application with EaselJS.

Step 1 — creating the HTML template

Take a look at the following code that represents the boilerplate we’ll use:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>EaselJS Starter: Template Page</title>
<script src = "lib/easeljs-0.6.0.min.js"></script>
<script>
// Your code here
function init() {
}
</script>
</head>
<body onload="init();" style="background-color:# ccc ">
<h1> EaselJS Starter: Template page </h1>
<canvas id="mycanvas" width="960" height="450"
style="background-color:#fff"></canvas>
</body>
</html>

The following are the most important steps of the previous code:

  1. Define an HTML5 <canvas> object with a width of 960 pixels and a height of 450 pixels. This represents the drawing area of your EaselJS application.

  2. When the page is completely loaded, the onload event is fired and the init() function is called. The <script> block is the place where you have to add the code but you should always wait for the onload events before you do anything.

  3. Set the <body> and <canvas> background CSS styles.

The result is a white container inside an HTML page, as shown in the following screenshot:

Step 2 – creating a “Hello World” example

Now replace the init() function with the following code:

function init() {
var canvas = document.getElementById("mycanvas");
var stage = new createjs.Stage(canvas);
var text = new createjs.Text("Hello World!", "36px Arial",
"#777");
stage.addChild(text);
text.x = 360;
text.y = 200;
stage.update();
}

Congrats! You have created your first canvas application!

The following screenshot shows the output of the previous code, with a text field at the center of the canvas:

The following are the most important steps of the previous code:

  1. Use the getElementById method to get a canvas reference.

  2. In order to use EaselJS, create a Stage property, passing the canvas reference as a parameter.

  3. Create a new Text property and add it to the stage.

  4. Assign values for the x and y coordinates in order to see the text at the center of the stage.

  5. Call the update() method on the stage to render it to the canvas.

The Stage property represents the root level for the display list, which is the main container for all the other graphic elements. Now you only need to know that every graphic element must be added to the Stage property, and that every time you need to update your content you have to refresh the stage calling the update() method.

Summary

After the previous “Hello World” example the book will help you to learn how to use the most important EaselJS topics with practical examples, technical information, and a lot of tip and tricks, creating a small advertising interactive web application.

By the end of book you will be able to draw graphic primitives and texts, load and preload images, handle mouse events, add animations and spritesheets, use TweenJS, PreloadJS, and Zoe and optimize your code for desktop and mobile devices.

This article helped you to learn what EaselJS actually is, what you can do with it, and why it’s so great. It also helped on hoe to create your first HTML5 canvas application “Hello World”.

Resources for Article :

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here