Tutorial 1 - Dragon of Bosnia: Basic HTML, Canvas and EaselJS - Drawing Images to Canvas

So in this first tutorial we will make a html canvas element and draw something in it with the help of the EaselJS library. Nothing interactive right now just the basic stuff so let's get started. And here is a preview picture of what our canvas will look like at the end.

Preview picture of our finished work in tutorial 1.

First we create a simple HTML file in which we load the necessary Javascript and create a canvas element.

The basic HTML file looks like this:

The HTML is pretty much straight forward there are just a few lines that need some explaining.

Line 8: Here we load the EaselJS JavaScript library which we will use for the interaction with the canvas element in this case we use the hosted version of the library. We could also download the library and use a local copy if we desire to. For more information on EaselJS be sure to visit: http://www.createjs.com/#!/EaselJS

Line 11: In this line we load or main.js JavaScript file where we will write our code.

Line 14: Here the onload event will call the init() function which will be executed when our document loads. We will write this function in our main.js file later.

Line 15: Finally here we create our <canvas> element we give it an id so that we can reference it later in our code and we give it the attributes width and height in pixels. We also give the canvas element a border with some basic CSS just so we can see it. And here it is our empty canvas. Does't look like much now but wait till we start drawing on it.

So that's it for our HTML we created the canvas now we go on to the real stuff writing the JavaScript in our main.js file. In this tutorial we will just load some images and draw them to our canvas. So let's get started.

We want to write our init() function which is executed when the document loads. For now we will write there the whole code that is needed to load and draw the pictures to the canvas. So here is how the init() function will look like and than i will explain it line by line.
So there you go now what is happening here.

Line 3: Here we just get the <canvas> element from our HTML file and store it into a variable called canvas for convenience and future use. We use the getElementById() method which will return the element that has the id attribute with the specified value in our case this is the <canvas> element which has the id attribute tutorialCanvas. If you want to know more about the getElementById() method here are two links:

• http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
• https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

Line 4: Here is our first encounter with EaselJS. Here we create a new Stage and we point it to our canvas variable. The stage will contain all the display objects we will be drawing. As you can see the Stage class is inside a namespace called createjs, in fact all EaselJS classes are inside that namespace. You can find out more about the Stage class in the very good EaselJS documentation:

• http://www.createjs.com/Docs/EaselJS/classes/Stage.html

Line 6: Here we create our image that we will draw to the canvas from the EaselJS Bitmap class and store it in the backgroundImage variable. As you can see it is also a part of the createjs namespace and all we have to do is give it a link to our image. Again here is more resource on the Bitmap class:

• http://www.createjs.com/Docs/EaselJS/classes/Bitmap.html

Line 7: Here we add our image to the display list of the stage so it can be drawn and we do this using the addChild() method. More about the addChild() method here:

• http://www.createjs.com/Docs/EaselJS/classes/Stage.html#method_addChild

Line 8: So now there is one last step we have to do. We have a display list but there is still nothing drawn on the canvas until we call stag.update(); Which will draw all the children of the stage from the display list to the canvas in our case that is just our background image.

So here it is our canvas with an image drawn to it.

alternate content

Now that we know how to draw images onto our canvas let's add some more. We will draw some trees so our heroine has a forest she can walk through. We just add these to lines to our init(); function and we add them after the background image but before the stage.update().

Now our canvas looks like this with some fancy trees drawn on top of the background.

alternate content

That is why it matters where you add the lines of code. The display objects will be drawn in order as they where added in our case the background first than the trees on top of it.

I think we should add some ground so there is something to walk on. Let's do it like we did before by adding these two lines after the trees but before the stage update.

Hmmm what happened here?

alternate content

Obviously we have to tell the canvas where we want our image to be drawn. Our previous images where roughly the size of the canvas so there was no problem but this one is drawn at the top but it  should be at the bottom. We have to give the canvas the coordinates where we want the image to be drawn with the left top corner being the x = 0, y = 0 and by default all images will be drawn starting there.

The x coordinate for our ground image looks fine but we want to move it to the bottom so we give the y coordinate a value of let's say 164 and we do it with this line of code:


Which we will add after the stage.addChild(ground); line. And here it is our final canvas with all three images drawn where they should be.

alternate content

Now that is it for our first tutorial we did some basic HTML stuff, and some fancy canvas JavaScript magic using the EaselJS library.

You can find all the code for the tutorials here:

Source code on GitHub

If you implement the code from this tutorial (or download the one from GitHub) it can happen that the first time you load the site you will see a blank canvas and you have to refresh the site to see the images drawn to it. This happens because the code loads faster than the images, so we have to preload them to prevent this from happening. We will see how to do that in the next tutorial and we will also make a fancy loading screen. So better come back. See Ya. 

NEXT TUTORIAL 2 >> Preloading and a Loading Screen