Who needs Paint when you have Canvas?
While putting together a project for Phase 3 of Flatiron’s Software Engineering program, my project partner and I came across a super cool oscillator that takes in audio input and displays a representation of those sound waves to the screen. (You can check out said super cool oscillator here .) Knowing we wanted to implement something similar for our project, we spent one evening dissecting the code line-by-line and came across an element neither of us had come across before — <canvas>. After a bit of research, I have come to a slightly better understanding of what canvas is and have included a brief (read: very brief) tutorial. While you may not be putting oils or watercolors on this kind of canvas, with just a little code artistry you will find <canvas> to be a powerful tool for constructing specific illustrations you may want for your program.
Canvas is an HTML element that uses a scripting language (such as JavaScript) to draw 2D graphics. A canvas element in an HTML file might look a little somethin’ like this:
Notice that how we write a <canvas> element looks a lot like how we write an <img> element but without a src or alt attribute. Also a <canvas> element only has two attributes — width and height. When width and height are not specified, <canvas> will default to be 300 pixels wide and 150 pixels high. Also notice we are calling a function called draw() in our <body> element. We’ll get to that next.
The <canvas> element creates a fixed-size space to display a “rendering context”. For an artist, their canvas is initially blank, and they need to access a context for their art (are they working in watercolors? acrylic paint? mixed media?) Similarly, to display something via <canvas>, a script needs to access the rendering context and draw on it. Within a function, we first grab the DOM node representing our <canvas> element. We then access the rendering context through a method called getContext(), which takes one parameter, the type of context (here, ‘2d’ for 2D graphics. No working in 3D fun today)
Here is our draw() function, called before in our <body> element in HTML. This will execute once the page loads.
Going back to our artist analogy, before paint touches the canvas, the artist needs a little understanding of their tools. Similarly, canvas operates on an x,y grid system that is essential to fixing elements onto the space. I have included a graphic from the MDN Web Docs tutorial on <canvas> that explains the grid succinctly below:
Unlike our painter, <canvas> can only work in rectangles and paths (a series of points connected by lines). At first that seems a bit limiting and boring, but knowing how to manipulate these shapes opens up opportunities for amazing and advanced illustrations made in our scripts(like that oscillator I mentioned earlier.) Here is an example code of two super chill rectangles and a gorgeous triangle as an example of rectangle/path illustration.
In the first two examples, fillRect draws a filled-in rectangle and takes in four parameters — (x, y, width, height). X and y specify the position on the canvas, relative to the top left corner of the rectangle. Width and height control the rectangle’s size. fillStyle fills our rectangle cuties with some sweet colors.
The third example of a path is slightly more complicated. we first start with beginPath() which creates a new path. Then moveTo, in effect, picks up our artists paintbrush and moves it to the specified x and y coordinates. The following lineTo codes draw paths from those x and y coordinates. We can call fill() to close any open shapes automatically, and fillStyle once again gives us some colorful vibes.
Are you ready to see the final product?
Now you have some very basic tools to draw via canvas! It may not look like much, but hey, neither does a Mark Rothko at first glance. You are well on your way to be the Piet Mondrian of HTML. Throw in some arcs and circles and you’ll be a regular Kandinsky. I’m out of bad artist jokes, but you get the point — with practice, your canvas on <canvas> will have endless possibilities.