JavaScript Canvas programming tutorial

The Canvas is an element which allows you to create awesome graphics in JavaScript.
Here are some of the great stuff you can build:
- Games:
animated characters
moving objects: vehicles, bullets
backgrounds
scrolling in various directions
- Drawing
geometrical shapes: rectangles, circles, lines, curves etc.
various line widths, fill patterns, colors
transparency
- Bitmap graphical effects
fade in/fade out
zoom in/out
blur
image deformation

Canvas is a great place to start learning JavaScript. It is easy to understand because you see the results right away. Many people find it more motivating to be able to draw an image than for example write a text or see a result of a mathematical equation. After all, a picture is worth a thousand words.

If you already have a basic knowledge of the Canvas, feel free to jump right into the exercises, otherwise keep reading the basics below.

Ok, so you decided to learn the fundamentals. I'll assume you have zero JavaScript knowledge and you'll still be able to start using the Canvas in the next couple of minutes.
Let's look at this template that we'll use:

<html>

let canvas = document.getElementById('myCanvas');

let context = canvas.getContext('2d');

</script>

</html>

It is an HTML file that includes JavaScript. All it does is creates an HTML page with only a Canvas on it. HTML is the language used to create web pages. You can copy the code above, paste into Notepad, save it on your hard drive and open it with any web browser (the last example on this page lets you experiment with the code without having to save the file - you can edit and execute the code within this page). Unfortunately, it won't be very exciting: it's just a blank page we an empty gray canvas on it, since we didn't draw anything on it:

I'll explain the code line by line, but you really don't have to understand the whole thing - you will learn the details later, for now just focus on the part below where you actually draw things on the Canvas. The code in the template is necessary for technical reasons and may seem complicated to beginners - don't worry: the actual drawing is much easier.
[Line 1] tells the browser that this file is an HTML document.
[2] Adds our Canvas to the HTML page. It sets the dimensions and the background color to gray, so that it contrasts with the rest of this page.
[3] Opens the JavaScript section
[4] stores the reference to the HTML Canvas object in the JavaScript 'myCanvas' variable. This allows JavaScript to manipulate the Canvas.
[5] stores the reference to the Context of our Canvas. To oversimplify things a little, the Context is how you can draw on the Canvas. Context provides objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface.
Again, this may sound a little technical, but all you have to understand right now is that we have our Context and we won't hesitate to use it.
[6-8] empty lines where we'll add the main program (not part of the template) later
[9] closes the JavaScript section (we're back in the main HTML document)
[10] closes the HTML document.

Enough of the boring stuff. Now we have our Context and that's what we really need to draw.
We'll draw our first shape by adding only one line of code:

<html>

let canvas = document.getElementById('myCanvas');

let context = canvas.getContext('2d');

context.fillRect(100, 50, 80, 120);

</script>

</html>

That's how easy it really is!

We only added line 7. That's how all the examples will work - we will only modify the part of the program the actually draws on the Canvas, you won't need to modify (or fully understand the template).
This line created a black rectangle on the Canvas. Noticed how the code references the Context? Technically, fillRect is a method of the Context interface, but if it sounds too nerdy, you can just remember that we will execute instructions in this format:

context.action(parameters)

where 'context' is the variable we defined (this word will never be changed in our examples) and 'action' is what we want to draw.
Here's what the parameters mean for fillRect: (x, y, width, height). The first parameter is the x (horizontal) coordinate of the upper left corner of our rectangle.
The second parameter is the y (vertical coordinate). The width and height are self-explanatory.
Coordinates are the only math subject you need to know to draw on the Canvas. There is one important difference between what you learned sometime around the 4th grade - on the Canvas, the Y-axis is pointing down. What we learned in the elementary school is the Cartesian coordinate system, where the Y axis is pointing up, but with computer graphics the reverse setup is much more useful.
In a world where people use very different screen resolutions, determining the coordinates of the top of the screen would require some calculations if we started in the bottom-left corner (like the Cartesian system does).
Since the top of the document is usually most important (that's where the text or images start - and if there isn't enough space on the screen, you just have to scroll to the bottom), in many computer applications the origin [the point with coordinates (0,0)] is the top-left corner. You can still calculate the coordinates of the bottom of the screen if you really need to.

Try experimenting with these values to get a feel of how it works.
Now one more line to change the color of the rectangle:

<html>

let canvas = document.getElementById('myCanvas');

let context = canvas.getContext('2d');

context.fillStyle = 'red';

context.fillRect(100, 50, 80, 120);

</script>

</html>

Line 6 instructs the Canvas to set the fill color to red. This will be in effect for all future shapes until the fillStyle is changed again.

Now one more line to add a line of text - 'Hello World!' at the coordinates (200,150).
The code in the box below corresponds to lines 6-8 in the examples above (the 'non-template' section). This time you can experiment with it without having to copy-paste to a new file: clicking on the button will execute the code. Now change 'red' to 'blue' and click the button again.

Hopefully the examples so far have been easy. But let's face it - the result is far from exciting - just a boring rectangle and a tiny text.
But now that you understand the basic principles, it's time to draw something more complicated. I promise it will go much faster from here on:

The 'for' loop
Line and path
Circle and arc
Yin Yang
Animation
Plotting math functions

Github repo with all the examples above - MIT License
Using a free URL for your website is probably not worth the risk