StormWorksWeb & Game Design

Html5 canvas game development: setting up a canvas

February 6, 2015 4:05 pm Published by

This is the start of my tutorial series on html5 canvas game development using the canvas element. It’s a bit of a refresher for me in the subject, as it’s been a while since I’ve done this myself.

Step 1: Don’t Give Up

In my opinion the best part of developing anything for the web is loading your browser and viewing your creation. Depending on what you see, however, this can also be the worst part of being a developer, but let’s be hopelessly optimistic here!

In order to view your images and assets, you will need to first set up a canvas element. True to it’s name, this is the equivalent of an artist’s canvas, a bitmap object that you can “paint” on and is specially optimised by the browser to be constantly refreshed and updated. You can choose to simply create the canvas in html:

1
<canvas class="artboard" width="650" height="650"></canvas>

Or create it in javascript on page load:

1
2
3
4
5
var canvas = document.createElement("canvas");
canvas.width = 650;
canvas.height = 650;
 
document.body.appendChild(canvas);

As you can see, we simply created a canvas element, and gave it a width and height to make sure it’s actually worked. You can open your browsers developer tools just to make sure it’s really there, but that’s hardly fun! We want something exciting to appear the first time we see the canvas!

The thing about the canvas is you can’t actually interact with it. Not literally anyway. If you want to draw to something you have to do it via its context, which is a fixed size rendering layer on top of it. The one we are interested in is the 2D context. Here’s the code to get the required context:

1
var ctx = canvas.getContext("2d");

Simple Painting on the canvas

With that done, we can now start the actual rendering:

1
2
3
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,canvas.width, canvas.height);
}

All we did here is set the ‘paint-bucket’ colour to black and then draw a rectangle at co-ordinates 0,0 (the top left of the screen), with the width of the canvas and the height of the canvas. Simple!

Now for something more challenging:

Drawing Images to the Canvas

Images are a little more complex to do, simply because it is easier to do something wrong. There are three steps to take:

  • Create a new image:
  • var image = new Image()
  • Set the source of the image:
  • image.src = "/moo/images/cow.png";
  • Draw the image:
  • drawImage(image);

The catch, however, is that if you try to draw the image before it has loaded, you will get an error that will not only stop the image appearing, but will also destroy everything you hold dear. So better not to let that happen. Lucky for us, there is an easy way of ensuring the image is loaded: the onLoad function. Here’s an example:

1
2
3
4
5
var image = new Image()
image.onload = function(){
    ctx.drawImage(image, 0, 0)
};
image.src = "/moo/images/cow.png";

Here you ensure the image cannot be drawn unless it has been loaded, and when it has been, it is automatically drawn to the screen.

Here’s one I did earlier:

Thanks for reading! if you’re feeling sociable, leave me a comment or insult my face, I don’t mind. Alternatively, for more info on the topic, have a look at the official mozilla developer article: Mozilla Developer Tutorials Canvas Guide

Leave a Reply

Your email address will not be published.