context.clearRect(x, y, width, height) will clear a rectangle starting at (x, y) and clearing to the right width and down height.

This code will produce the image below:

context.fillStyle = '#FF0000';
context.fillRect(0, 0, canvas.width, canvas.height);

context.clearRect(40, 20, 20, 100);
context.clearRect(60, 60, 20, 20);
context.clearRect(80, 20, 20, 100);

context.clearRect(120, 20, 60, 20);
context.clearRect(140, 40, 20, 60);
context.clearRect(120, 100, 60, 20);

context.fillRect(x, y, width, height) will draw a rectangle starting at (x, y) and filling the area "width" to the right and "height" down.

This code will produce the image below:

context.fillRect(50, 50, 300, 200);

context.fillStyle will set the color for all future fills such as context.fillRect(). It's important to note theat context.fillStyle is not a method, it is an attribute. You set it like so:

context.fillStyle = 'red';

This code will produce the image below:

context.fillStyle = 'rgb(0,255,0)';
context.fillRect(50, 50, 100, 200);

context.save() saves all of the properties of the context. Then, when you call context.restore() it will reset all changes to the context you've made.

This code will produce the image below (note how the second rectangle is black and closer to the original origin despite calling translate and setting the fillStyle earlier):

context.save();
context.translate(100,50);
context.fillStyle = 'red';
context.fillRect(10, 10, 25, 25);
context.restore();

context.fillRect(10, 10, 25, 25);

context.scale(percentX, percentY) scales the x and y coordinates of the context, making drawings larger or smaller.

This code will produce the image below (note that all rectangles are defined to be the same size in the code are drawn in different sizes due to the scale of the context):

context.fillRect(25,25,25,25);
context.scale(2, 1);
context.fillRect(75,25,25,25);
context.scale(0.5, 1);
context.fillRect(150,25,25,25);
context.scale(2, 2);
context.fillRect(300,25,25,25);

context.translate(x, y) shifts the origin of the context (where the (0,0) point is) right by x and down by y. This allows you to draw execute multiple commands in a specific area of the context more easily.

This code will produce the image below (note how the fillRect commands are relative to the translation point (100,100)):

context.translate(50,50);
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);
context.fillStyle = 'green';
context.fillRect(10, 10, 25, 25);

Math.round(), Math.floor() and Math.ceil() will round a number to an integer. Math.floor() will always round down while Math.ceil() will always round up. Math.round() will round to the closest integer, either up or down.

Math.random() will produce a random decimal betweek 0 and 1. Calling it many times will produce a different random number each time.

Often you will multiple Math.random() by another number to get a random integer larger than 1. You may also call Math.floor() or Math.ceil() on the result to get an rounded integer.

A variable allows you to store information to use or change later.

For-loops allow you to repeat code over and over again, potentially adjusting the code a little bit each time.

The following code will produce the picture below:

for (var i=1; i<10; ++i) {
  context.fillRect(10 * i, 75 - (5 * i), 10 * i, 10 * i);
}

While-loops allow you to repeat code over and over again until a condition is met.

The following code will produce the picture below:

var i = 10;
while (i < 200) {
  context.fillRect(5, 5, i, 50);
  i += 10;
}

The coordinate system consists of X and Y values starting at (0, 0) in the upper left corner.

As you move down the canvas Y gets larger. As you move right on the canvas X gets larger.

So the point (100, 50) means you move right 100 and down 50.

Functions allow you to create chunks of code that can be called with different parameters.

The following code will produce the picture below:

function fillColorRect(x, y, w, h, color) {
  context.save();
  context.fillStyle = color;
  context.fillRect(x, y, w, h);
  context.restore();
}

fillColorRect(50, 50, 50, 50, 'red');
fillColorRect(150, 50, 50, 50, 'blue');
fillColorRect(250, 50, 50, 50, 'green');

Switch statements allow you to perform different code depending on the value of a variable.

The following code will produce the picture below (the switch statement only performs the code inside of case 2 because "i" is set to 2):

var i = 2;
switch (i) {
  case 1:
    context.fillStyle = 'red';
    break;
  case 2:
    context.fillStyle = 'yellow';
    break;
  case 3:
    context.fillStyle = 'blue';
    break;
}
context.fillRect(50, 50, 100, 50);

setInterval() allows you to execute code at specified intervals. It is frequently used to create animations.

This code will produce the image below:

var index = 0;
function count() {
  context.font = "20px serif";
  context.textAlign = 'center';
  context.fillText(index, canvas.width / 2, canvas.height / 2);
}
setInterval(count, 1000)

Event listeners allow you to "listen" for an event, such as a click, on an element in your html.

A full list of events can be found here: HTML5 Events

This code will produce the image below (if you were to click and draw the letters on the canvas):

canvas.addEventListener('mousemove', function(e) {
  if (e.buttons === 0) return;
  context.fillRect(e.layerX - 3, e.layerY - 3, 7, 7);
});