The very first thing that we need to do is to define an object, known as the "graphics context". This object is related to the html canvas on which we wish to draw. Let's suppose that this html canvas is identified by the id "canvas" (I know, not very original...). The javascript code needed to obtain this graphics context (usually denoted by the variable ctx) would be

This is for drawing in 2 dimensions ("2d") which is the focus of this tutorial as we mentioned in the introduction.

Since jQuery is so popular, you will often see the following jQuery "shortcut" instead

Please notice ...

This works well for "normal" web pages. In this tutorial, I make use of an embedded iframe to display a fake web page, containing the drawing canvas, in its own "window". For this reason, the code I have to use is slightly more complicated and looks like the following:

You probably will never need to use something like this but I thought I should point it out now so that you know where the variable ctx, that I will use in the rest of this tutorial, comes from.