Making <canvas> Art
<canvas>. Click anywhere on the page to generate new lights, each with randomized colors and trajectories that alter the appearance of the site header as they slowly move across the page.
If you’re not familiar with
You always start a canvas drawing by finding the element in the web document and then selecting a “context.” In this case, the context is
2d, because we want to make two-dimensional shapes within our canvas. After selecting a context, the canvas API contains tons of useful drawing features like fill styles, shapes, strokes, shadows, and a plethora of other features that allow us to make fancy alterations to our image area. The result of our script looks something like this:
The great thing about
<canvas>. It allows us to leverage the processing power of the web browser to generate math-based geometry and drawings. With a bit of work and a lot of creativity, we can even harness this power for artistic effect.
We’ll need to understand how to create an animation using
<canvas> before we can continue. This is a little more difficult to do. First of all, please understand that it’s very easy to use the canvas API in a way that hinders the performance of your web browser. Drawing in a canvas is very processor-intensive, especially if you are constantly updating the drawing for things like animation. To help alleviate any performance issues, I’m going to use a new feature called
requestAnimationFrame, that allows our web browser to decide how often to update the canvas, while maintaining optimal performance in our web document. This isn’t available in every browser, but fortunately Paul Irish has written an excellent poly-fill to add this capability to older web browsers. He writes about his script and this feature of the web browser in his blog post, here.
For the sake of brevity, I’m not going to include Paul’s script in my code examples, but you should use it in your own code. Using
requestAnimationFrame, we can create a basic “animation loop” in our script. It looks something like this:
When using animations in your canvas element, all drawing should be performed by a repeatable function. In our example, we’re using the
loop() function to draw a square in our canvas. The
requestAnimationFrame function tells the browser to automatically choose when to next draw the frame, based on the available processing power. The result is our
loop() running over and over, advancing our orange box from left to right. Notice that we use the
d variable (delta) to determine the time between frames in milliseconds. This is an important addition to normalize the speed of our animation. Without it, our animation would play much faster on computers with better processors, and in a few years when computers gain even more processing power, our animation could be so fast as to confuse or disorient users. Using the delta variable, we can specify a speed per millisecond. In our example, the position of the square advances by
0.1*d, or 0.1 pixels every millisecond, which translates into 100 pixels per second. No matter the speed of your processor, the animation will always take the same amount of time to complete.
The artistic element
Now that we understand the canvas element and how to animate it, we can put this together with some artistic creativity to create something more intriguing. In this next example, we’ll randomly generate colored circles and give them random trajectories within our canvas. By drawing the circles using a gradient rather than a solid color, our “northern lights” script will come to life.
New randomized circles will appear every time you click in this window. Try it out!
We’re only beginning to understand and utilize the power of
<canvas>. I’m eager to see how the industry adopts it as well as technologies like SVG to build amazing and artistic web content. In my next post, I’ll show how to adopt this code to use keyboard shortcuts and animations to create a simple canvas-based game that you can play right in your web browser.