Cavas Basics

Drawing Rectangles.

We can use what we already know about rectangles to "erase" portions of a canvas using fillRect and setting the fillStyle to our background color. Your background color will likely be white. You haven't learned about fillStyle yet but trust me on this, that's how you set a color. So don't act surprised when it comes up again in a couple videos.

clearRect is an easier way to do the same thing without modifying the fillStyle. You'll learn more why changing the fillStyle isn't always the best option a bit later.

If you have a canvas c and given some code to draw a rectangle in a given color, you might write something like

var c = document.querySelector("#c");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
// Start at (0,0) and draw a 50px x 50px blue rectangle.
ctx.fillRect(0,0,50,50);
// Start at (0,0) and clear a 25px x 25px rectangle.
ctx.clearRect(0,0,25,25);

If you want to erase the entire canvas, you could call clearRect with the dimensions of canvas as follows:

ctx.clearRect(0, 0, c.width, c.height);

A slightly shorter way to clear a full canvas is to change either the height or the width on the canvas:

c.width = c.width;

Doing so saves some keystrokes but may not be as readable to others who are viewing your code.

Use clearRect when you want to erase a portion of the canvas or object.

Moving Objects in a Canvas.

Canvas2D allows you to translate (move), rotate, or scale objects.

Scaling

scale(x,y) multiplies the x and y values by a given factor so

ctx.scale(2,3);

will make all values twice as large on the x axis and three times as large on the y axis.

Translation

translate(x,y) moves all subsequent draw commands by x number of pixels on horizontally and y pixels vertically.

ctx.translate(20,40); moves all elements drawn after it 20 pixels to the rights and 40 pixels down.

Rotation

ctx.rotate(angleRadians) rotates an object a certain number of radians (generally) about its center. You may have learned about radians in school but here's a handy formula to convert a value from degrees to radians.

radians = degrees * (Math.PI/180)

Don't ask us why everything in Computer Graphics uses radians. We have no idea. :)

Order of operations

You should generally scale objects first, rotate them next, and then finally translate last. 

Processing User Input 

Playing a video in a canvas using requestAnimationFrame is just one of the many interactive things you can do.

To create more complex applications, we have to think more about not only the things we are displaying to the user on-screen but also any input (keyboard, mouse, audio) the user might generate that we need to process.

The game loop is a sequence of events that run continuously while an app or game is being used. requestAnimationFrame handles most of the heavy lifting in that it ensures that your app runs as close to 60 frames per second as possible while the app is being actively viewed.

Assuming we have already created the functions we plan to call, a fleshed out game loop could look something like this.

function draw() {
    // request to execute this function at the next earliest convenience
    requestAnimationFrame(draw);
    processInput();
    moveObjectsAndEnemies();
    drawAllTheThings();
}

Processing Keyboard Input

While it isn't too difficult to process keyboard presses by hand, I rather stand on the shoulders of giants and use open source projects that have perfected a library serving the thing I want to do. One such library is Kibo.

Kibo allows you to reference keys by their common names('a', '3', 'up') instead of their keycodes greatly simplifying your code. You can also attach events to pressing or releasing a key as well as modifier keys or wildcards.

var k = new Kibo();
k.down(['up', 'w'], function() {
    // Do something cool on the canvas
});

k.up(['enter', 'q'], function() {
    // Do other stuff.
});

Processing Mouse Input

Like many other DOM elements, the canvas can accept click and mousedown events. We do however have to do a little work to figure out where exactly in the canvas the user has clicked. Mouse click events return clientX and clientYpositions that are global to the browser window. Every element knows where it is positioned relative to the browsers (0,0) position (offsetLeft and offsetTop).

To get the canvas-relative of a click, you need to subtract the offsetLeft and offsetTop values from clientX and clientY. Check out the example code below.

var c = document.querySelector("canvas");

function handleMouseClick(evt) {
        x = evt.clientX - c.offsetLeft;
        y = evt.clientY - c.offsetTop;
        console.log("x,y:"+x+","+y);
}
c.addEventListener("click", handleMouseClick, false);