A Digital Approach at Modern Art
The HTML canvas object can be directly manipulated using JavaScript. The following will be some simple things you can do with it.

The first thing, in order to get started with a canvas, is to create and define the canvas object in an HTML file. The creation looks like this:

In this line in an HTML file we create a canvas, and in this case it is named “tutorial”, it is also given a width and height in pixels.
“We don’t make mistakes, just happy little accidents.”
An important thing to keep in mind when learning to use a canvas object is that as long as it runs, there are many ways to do similar things, and that even doing something that feels like a mistake may produce some interesting and cool effects.
One common “mistake” is to render an animation on a frame-by-frame basis without refreshing the canvas every single frame. If you do this, the residual information from the last frame will be retained. In short, everything moving will leave a trail. If you do not wish to leave a blur, simply reference the canvas, and get its context like this:

and call the method “clearRect” in the following way:

Of course to use this correctly, the place where it is called matters greatly. To clear an animation, you must call it every time you want a new frame. The way in which I do this is using a timer that calls it.
Next up, some basic shapes. A rectangle is a nice easy one, as there is a built in method that can fill a rectangular area with color. The method syntax looks like this:

The ‘fillRect’ method takes the coordinates of the top-left corner of the rectangle as its first two arguments in the form of an (x, y) pair. The next two arguments are the distance to the right and how far down the rectangle extends. By default the rectangle will not be filled unless the context fill style is assigned before ‘fillRect’ is called. To do this you can use a hex value, such as “#FF0000” for red. In this case I have constructed an object that contains the (x, y) pair, as well as the width and height and a hex value. The object is called “rectangle”.

To round things out, the next shape is a circle.

I created a Circle class in order to create many circles and added a method that does the actual drawing. The method is the valuable part here, it takes the color of the circle and sets the “strokeStyle” of the context being passed in (by passing context you can draw the same circle in many canvas objects, just remember to pass the “tutorial_canvas_context” in so that the canvas you are working with gets the circle. After setting the color of the line being used to draw the circle, we call “beginPath” on the context, and describe the ‘arc’ of the circle by its center positions in (x, y) coordinates, the radius of the circle we want to draw in pixels, and most importantly we provide the beginning angle and the end angle in radians, a circle begins at 0 radians and ends at 2*π radians. Next we call “stroke”, and optionally set the width of the line around the circle. By default these circles are not filled. here I set the width to 22. And don’t worry about the ‘false’ argument, that just determines which direction the circle is drawn in, clockwise or counter-clockwise. It really doesn’t matter here, but would if you used any other final angle less than 2*π radians.

As far as 2D output goes, if you can see it on a computer screen you could see it in a canvas object with enough effort.
A short example of this is the ability of the canvas object to display arbitrary shapes.

Here is one with many sides:

You don’t have to fill the area though, and you can draw the lines using a loop. In this way you can generate fractals or other recursive imagery.

I highly recommend trying this out for yourself, see what you can make! Have fun with canvasses!
