So, what is EaselJS?

Exclusive offer: get 50% off this eBook here
Instant EaselJS Starter [Instant]

Instant EaselJS Starter [Instant] — Save 50%

Build innovative and engaging HTML5 canvas applications for your mobile and desktop browsers with this book and ebook

$12.99    $6.50
by Fabio Biondi | April 2013 | Open Source

This article by Fabio Biondi , author of Instant EaselJS Starter helps you to learn what EaselJS actually is, what you can do with it, and why it's so great. It will also help you on how to create your first HTML5 canvas application "Hello World".

(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:


Instant EaselJS Starter [Instant] Build innovative and engaging HTML5 canvas applications for your mobile and desktop browsers with this book and ebook
Published: March 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Fabio Biondi

Fabio Biondi is a freelancer, living in the north-east of Italy. Since 2003, he deals almost exclusively with the Adobe Flash Platform technologies.

He is an Adobe Certified Instructor (ACI) in Flex, AIR, Flash Professional, Flash Catalyst, and FlashLite (ACE) and he has devoted all his time and resources to the development of custom interactive user interfaces for web, mobile, and touch displays for many international brands.

Since 2011 he has been focusing almost entirely on the development of cross-platform web applications in HTML5, JavaScript, CSS3, AngularJS, and HTML5 canvas through the use of the CreateJS suite.

Fabio runs a blog (www.fabiobiondi.com/blog) and a YouTube channel (http://www.youtube. com/user/BiondiFabio) where he provides tutorials, snippets, and many prototypes related to HTML5, AIR, Flash, Arduino, Kinect, and collaborative applications.

Books From Packt


Instant KineticJS Starter [Instant]
Instant KineticJS Starter [Instant]

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

 Django JavaScript Integration: AJAX and jQuery
Django JavaScript Integration: AJAX and jQuery

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

HTML5 Canvas Cookbook
HTML5 Canvas Cookbook

 Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook

 Instant HTML5 Presentations How-to [Instant]
Instant HTML5 Presentations How-to [Instant]

 HTML5 Multimedia Development Cookbook
HTML5 Multimedia Development Cookbook


Your rating: None Average: 1 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
N
V
e
T
h
n
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software