A Digital Approach at Modern Art

Cole Ditzler
Nov 3 · 4 min read

The HTML canvas object can be directly manipulated using JavaScript. The following will be some simple things you can do with it.

An animation produced in a canvas object.

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:

This is how you get the canvas and context to draw in in general, which is important for everything else.

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

This calls “clearRect” and obliterates drawn material in a rectangle of space from 0,0 to the far end and bottom of the canvas (its width and height), but can be used in a partial manner by adjusting the arguments.

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:

This is the same tutorial_canvas_context.

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”.

A loop that draws more and more rectangles every frame.

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

If you plan on making more than one, make a class.

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.

Here are some circles with random sizes, positions, and colors.

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.

A square using other methods.

Here is one with many sides:

Any polygonal area can be filled.

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.

Here is a spiral drawn using the Fibonacci sequence and a starting point.

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade