Canvas Tutorial

I have been away from SoloLearn, code-wise, for a long time. However, I have still been around to moderate when I can, of course :). Recently, I've been working on some personal projects that involve the HTML5 canvas, and I have somehow developed some new coding styles that have been working really well for me. This will be, not only a walkthrough of how I think about my canvas projects, but also a tutorial for those wanting to get started with the canvas. Ask questions or comment on my methods in the comments; I'd love to hear from you!

As a note, I will be using jQuery in my personal code for certain things, but the canvas related code will be vanilla javascript. And no, vanilla is not a library; it just means I will use javascript without any additions or libraries. This tutorial will also assume a basic to good knowledge of JavaScript. I won't be going into detail about the things you can find in other canvas tutorials either.

Using a Timestamp

js file

let can, ctx;
let frameTime = 0, prevTime = null;
let animate;// this will be used later

window.onload = function() {
    init();
    requestAnimationFrame(run);
};

function init() {
    can = document.getElementById("can");
    ctx = can.getContext("2d");

    can.width = window.innerWidth;
    can.height = window.innerHeight;
}

function run(timeStamp) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(220,220,220,1.0)";
    ctx.fillRect(0, 0, can.width, can.height);

    if (prevTime === null) {
        prevTime = timeStamp
    }
    else {
        frameTime = timeStamp - prevTime;
        prevTime = timeStamp;
    }

    requestAnimationFrame(run);
}

Here is my full set up of my web codes - a "template", if you will, to start all of my animations or games. I used to have global variables for the width and height of the canvas, but I'm starting to minimize my use of global variables as much as possible. The width and height of the canvas can be accessed through the canvas once its width and height are set, so using separate variables for that seems silly to me. In run, I like to clear my screen with colors, so I use a fill instead of a clearRect. I can also apply cool looking alpha effects this way. The newest addition to my codes is the frameTime calculation. It is a calculation of how long one frame of animation takes to run. You can use it to calculate frame rate, but you can also use it to create timed animations. All of this is only possible because of the requestAnimationFrame window method. This method passes a high definition time stamp to the function we pass in as a parameter. In this case, it's run. One of the major benefits of using this time stamp is that the timed animations can be synchronized to the frames of the canvas. This is because JavaScript isn't diverting any calculations or drawing functions to a different function frame. Using things like setInterval and setTimeout will call their callback function on separate frames of the message queue. Go to MDN to learn more about the call stack and event loop. Now, lets use the time stamp to create some animations!

animate function

function animation() {
    let elapsed = 0;
    let duration = 5000;
    const y = can.height / 2;
    const PI2 = Math.PI * 2;
    const width75Percent = can.width * 0.75 * 0.5;
    const halfWidth = can.width / 2;
    
    return function() {
        let x = halfWidth + Math.cos(elapsed * 0.0035) * width75Percent;
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(x, y, 6, 0, PI2);//draws a circle
        ctx.fill();
        
        elapsed += frameTime;
        if (elapsed >= duration) {
            // in here is where you can synchronize this animation with another
        }
    };
}

This is the function we are going to call in our run function. It will return the function that is actually getting called in run. I do this to create a local scope of variables in the function, instead of adding all of them to the global scope. We can set a variable to this returned function in init and then call it over and over in run, like so:

Setting and calling animate

// add a global variable called animate "let animate;"

function init() {
    can = document.getElementById("can");
    ctx = can.getContext("2d");

    can.width = window.innerWidth;
    can.height = window.innerHeight;
    
    animate = animation();
}

function run(timeStamp) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(220,220,220,1.0)";
    ctx.fillRect(0, 0, can.width, can.height);

    if (prevTime === null) {
        prevTime = timeStamp
    }
    else {
        frameTime = timeStamp - prevTime;
        prevTime = timeStamp;
    }
    
    animate();

    requestAnimationFrame(run);
}

// function animation definition down here

Below is the result of this animation function. You can also try it out and mess around with it in this SoloLearn code.

In my own code for this example, I have triggered the Play button when the animation has run for a duration of 5 seconds (5000). Let's use this idea to get our little dot to move exactly one time across the screen in two seconds.

Disance Over Time

function animation() {
    let elapsed = 0;
    let duration = 2000;
    let x = 0;
    const y = can.height / 2;
    const PI2 = Math.PI * 2;
    let speed = can.width / duration;// speed is "distance over time"
    // our speed is now in pixels per millisecond
    
    return function() {
        x += speed * frameTime;
        // we multiply by the frame time to get the distance our dot should travel in one frame
        // (pixels / milliseconds) * milliseconds = pixels
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(x, y, 6, 0, PI2);//draws a circle
        ctx.fill();
        
        elapsed += frameTime;
        if (elapsed >= duration) {
            // in here is where you can synchronize this animation with another
            speed = 0;
            elapsed = 0;
        }     
    };

}

seconds

I've added a second counter here just to illustrate the amount of time that one frame of animation takes; it's lightning quick! Of course, one frame is not always the same amount of time. It's also not a nice, rounded amount of time either. This is why it's important to set values when you've reached the duration. For this example, I set the dot's location to the right edge of the screen when the duration is reached. It makes it look cleaner. You can mess around with an example in this code.

Chaining Animations

animation function

function animation() {
    let elapsed = 0;
    const durations = [2000, 1500, 500, 4000];
    const distanceW = can.width - 50;
    const distanceH = can.height - 50;
    const distances = [{x: distanceW, y: 0},
                       {x: 0, y: distanceH},
                       {x: -distanceW, y: 0},
                       {x: 0, y: -distanceH}];
    let currentStage = 0;
    let x = 25, y = 25;
    const PI2 = Math.PI * 2;
    
    let speedX = distances[currentStage].x / durations[currentStage];
    let speedY = distances[currentStage].y / durations[currentStage];
    
    return function() {
        x += speedX * frameTime;
        y += speedY * frameTime;

        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(x, y, 6, 0, PI2);//draws a circle
        ctx.fill();
        
        elapsed += frameTime;
        if (elapsed >= durations[currentStage]) {
            elapsed = 0;
            
            currentStage += 1;
            if (currentStage === durations.length) {
                currentStage = 0;
                x = 25;
                y = 25;
            }
            speedX = distances[currentStage].x / durations[currentStage];
            speedY = distances[currentStage].y / durations[currentStage];
        }     
    };

}

The animation function can be changed to chain different actions together, using the elapsed time as the triggering method. I've used duration as the condition in both of these codes, but you can also use distance as well. It's kind of difficult to think in pixels per millisecond. It's much easier to think in a total distance in an amount of time. In fact, as long as your speed was calculated correctly, you can use the distance as the triggering method. The elapsed time AND the distance will reach the desired values in the same animation frame. When using setInterval and setTimeout, distance and time are not synchronized, which forces the programmer to prioritize one over the other.

Try playing with this code in SoloLearn. You might notice a behavior in that code that is less than ideal. In the code for this example, I have made some changes that make the dot's position at every corner perfectly accurate. If you're not seeing it, look at the dot's position after it goes really fast across the bottom. It's supposed to be the same distance from the canvas edge on every side like this example above.

Thanks for checking out this tips page! I hope you learned something from it. If something is confusing you, or you just want to talk about coding, feel free to DM me or comment in this code. As always, happy coding everyone :)

Canvas Tips

Using a Timestamp

Chaining Animations

Canvas Tips 1