HTML5 Canvas: From Noob to Ninja - an interactive deep dive/

...

/

Deconstructing the Example

Deconstructing the Example

We'll cover the following...

Just like you can’t break that which doesn’t exist, you can’t really have a deconstruction without an already-constructed example. Like I mentioned earlier, we are going to deconstruct the blue circles animation you see above. The full HTML, CSS, and JavaScript that makes up this example looks as follows:

  • HTML
html
Take a few moments, read through the code, and try to understand what is going on. If you really want to get some Schrute Bucks, open this example (in a new browser tab) in your favorite browser debugging tool, set some breakpoints, and step through the main sections line by line. That’s how real ninjas try to understand what is going on.


Once you are done looking at the code and/or imagining a sweet life as a ninja or looking up what a Schrute Buck is, let’s walk through all of this code together and understand what is going on.


Defining the Canvas


Let’s start with the easy part - defining your canvas element that will display our animation. For this, you have to look at our HTML:


Press +  to interact
<div id="container">
    <canvas id="myCanvas" width="500" height="500">
     
    </canvas>
</div>
Our canvas element has an id value of myCanvas, and its width and height attributes are set to 500. This results in your canvas being a square with each edge being 500 pixels. Remember, you can’t set the width and height of your canvas in CSS. Doing so will result in everything inside your canvas getting all stretched and looking weird. You have to specify the width and height inline on the canvas element like I’ve done.


Now, despite the special treatment for width and height, this doesn’t mean that other CSS styling-related stuff can’t be attached to the canvas. In our style block, I have a style rule defined to give our canvas a dotted border:


Press +  to interact
#myCanvas {
    border: 1px #CCC solid;
}
At this point, if you were to take a snapshot of what this page would look like, here is what you would see:


widget
That’s right. You would see nothing…except for the dotted border. The reason is that your canvas-based animation only knows one game, and that game is JavaScript. In the next few sections, we’ll walk through the JavaScript and see how the lines of code result in some beautiful (totally hot!) blue circles animating around on the screen.


Overview of our Code


The bulk of what this animation does lives in JavaScript. Everything from drawing the circles to moving them around is handled entirely by our code which you can see below:


Press +  to interact
var mainCanvas = document.getElementById("myCanvas");
var mainContext = mainCanvas.getContext('2d');
 
var circles = [];
 
function Circle(radius, speed, width, xPos, yPos) {
    this.radius = radius;
    this.speed = speed;
    this.width = width;
    this.xPos = xPos;
    this.yPos = yPos;
    this.opacity = .05 + Math.random() * .5;
 
    this.counter = 0;
 
    var signHelper = Math.floor(Math.random() * 2);
 
    if (signHelper == 1) {
        this.sign = -1;
    } else {
        this.sign = 1;
    }
}
 
Circle.prototype.update = function () {
    this.counter += this.sign * this.speed;
 
    mainContext.beginPath();
    mainContext.arc(this.xPos + Math.cos(this.counter / 100) * this.radius, 
                    this.yPos + Math.sin(this.counter / 100) * this.radius, 
                    this.width, 
                    0, 
                    Math.PI * 2,
                    false);
                     
    mainContext.closePath();
 
    mainContext.fillStyle = 'rgba(185, 211, 238,' + this.opacity + ')';
    mainContext.fill();
};
 
function setupCircles() {
    for (var i = 0; i < 100; i++) {
        var randomX = Math.round(-200 + Math.random() * 700);
        var randomY = Math.round(-200 + Math.random() * 700);
        var speed = .2 + Math.random() * 3;
        var size = 5 + Math.random() * 100;
        var radius = 50 + Math.random() * 100;
 
        var circle = new Circle(radius, speed, size, randomX, randomY);
        circles.push(circle);
    }
    drawAndUpdate();
}
setupCircles();
 
function drawAndUpdate() {
    mainContext.clearRect(0, 0, 500, 500);
 
    for (var i = 0; i < circles.length; i++) {
     
        var myCircle = circles[i];
        myCircle.update();
    }
     
    requestAnimationFrame(drawAndUpdate);
}
Before diving into the code, let me first describe what the code does in a very hand wavy fashion so that you will be better prepared for the details that you will see shortly.


Like I mentioned earlier, all of the JavaScript you see is responsible for drawing and animating the circles into the canvas. Now, you may be wondering if it really takes that much code to do something like this. After all, if you compare the amount of code here to the amount of code you had when animating a single element in my Creating a Simple HTML5 Animation tutorial…there is a lot of code here:


widget
The answer is “yes”, and the reason for all of this extra code is because dealing with many elements requires a little ...