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.lineTo(x, y) creates a path from the current point - default (0,0) - to the point (x, y). In order to see the line you must call context.stroke().

This code will produce the image below:

context.beginPath();
context.moveTo(50, 50);
context.lineTo(100,100);
context.lineTo(150, 50);
context.lineTo(200, 100);
context.stroke();

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.