Making <canvas> Art

Got <canvas>? Focus your attention, if you will, to the top of this web document. The header area of my website includes animated “northern lights” of a sort, generated using HTML5’s new JavaScript rendering engine called <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 <canvas>, the best way to learn it is to see a simple example. The following HTML and JavaScript will generate an orange rectangle within the <canvas> area.

<canvas id="example1" width="400" height="300"></canvas>
// get the canvas

var canvas = document.getElementById('example1');

// get the "2d" context

var context = canvas.getContext('2d');

// change fill style to orange

context.fillStyle = '#ff7700';

// draw an orange rectangle

context.fillRect(0, 0, 400, 300);

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> is that it’s a JavaScript API, meaning we can take advantage of all the great features of JavaScript like variables, events, loops, and the like. Let’s adapt our script to create a grid of smaller squares across our canvas area using a simple JavaScript loop.

<canvas id="example2" width="400" height="300"></canvas>
// get the canvas and context

var canvas = document.getElementById('example2');
var context = canvas.getContext('2d');

// orange fill style

context.fillStyle = '#ff7700';

// create squares in a loop

for(var x = 0; x < canvas.width; x += 25){
  for(var y = 0; y < canvas.height; y += 25){
    context.fillRect(x, y, 20, 20);

In just a few lines of JavaScript, we were able to generate 192 squares in our canvas. This, in my opinion, is the true value of <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:

<canvas id="example3" width="400" height="300"></canvas>
// get the canvas

var canvas = document.getElementById('example3');
var context = canvas.getContext('2d');
context.fillStyle = '#ff7700';
var time = false;

// box position

var x = -100;

// animation loop

var loop = function(){

  // get time since last frame

  var now = new Date().getTime();
  var d = now - (time || now);
  time = now;

  // clear previously drawn rectangles

  context.clearRect(0, 0, canvas.width, canvas.height);

  // draw new rectangle

  context.fillRect(x, 100, 100, 100);

  // advance horizontal position

  x += 0.1 * d;

  // reset horizontal position

  if(x > canvas.width){
    x = -100;

  // request next frame



// first frame


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.

<canvas id="example4" width="400" height="300" style="background-color: #0e74a2;"></canvas>
// get the canvas

var canvas = document.getElementById('example4');
var context = canvas.getContext('2d');
var time = false;

// create an empty array of "circles"

var circles = [];

// animation loop

var loop = function(){

  // get time since last frame

  var now = new Date().getTime();
  var d = now - (time || now);
  time = now;

  // clear the canvas

  context.clearRect(0, 0, canvas.width, canvas.height);

  // draw circles

  for(var i = 0; i < circles.length; i++){

  // request next frame



// circle object

var circle = function(options){

  // configuration

  var circle = this;
  circle.settings = {
    x: 0,
    y: 0,
    radius: 20,
    orientation: 0,
    vector: { x: 0, y: 0 },
    speed: 1,
    color: { red: 0, green: 0, blue: 0, alpha: 1 }

  // merge options into settings

  var newsettings = {};
  for(var attrname in circle.settings){ newsettings[attrname] = circle.settings[attrname]; }
  for(var attrname in options){ newsettings[attrname] = options[attrname]; }
  circle.settings = newsettings;

  // update circle

  circle.update = function(d){

    // update position

    circle.settings.x += circle.settings.vector.x * circle.settings.speed * d;
    circle.settings.y += circle.settings.vector.y * circle.settings.speed * d;

    // bounce

    if(circle.settings.x < 0 && circle.settings.vector.x < 0 || circle.settings.x > canvas.width && circle.settings.vector.x > 0){
      circle.settings.vector.x = circle.settings.vector.x * -1;
    if(circle.settings.y < 0 && circle.settings.vector.y < 0 || circle.settings.y > canvas.height && circle.settings.vector.y > 0){
      circle.settings.vector.y = circle.settings.vector.y * -1;


  // draw circle

  circle.draw = function(){

    // gradient fill

    var gradient = context.createRadialGradient(circle.settings.x, circle.settings.y, circle.settings.radius / 10, circle.settings.x, circle.settings.y, circle.settings.radius);
    gradient.addColorStop(0, 'rgba(' + + ', ' + + ', ' + + ', ' + circle.settings.color.alpha + ')');
    gradient.addColorStop(1, 'rgba(' + + ', ' + + ', ' + + ', ' + circle.settings.color.alpha / 50 + ')');
    context.fillStyle = gradient;

    // draw

    context.arc(circle.settings.x, circle.settings.y, circle.settings.radius, 0, 2 * Math.PI, false);



// create new circles

var newcircles = function(){

  // remove old circles

  circles = [];

  // create 5 new circles

  for(var i = 0; i < 5; i++){

    // create a new circle

    var newcircle = new circle({
      x: Math.floor(Math.random() * canvas.width),
      y: Math.floor(Math.random() * canvas.height),
      radius: Math.floor(Math.random() * canvas.width),
      orientation: Math.floor(Math.random() * 360),
      vector: {
        x: Math.random() / 40,
        y: Math.random() / 40
      speed: Math.random(),
      color: {
        red: 100 + Math.floor(Math.random() * 155),
        green: 100 + Math.floor(Math.random() * 155),
        blue: 100 + Math.floor(Math.random() * 155),
        alpha: 0.1 + Math.random()

    // add new circle to circles array




// generate new circles

window.addEventListener('click', newcircles, false);
window.addEventListener('touchend', newcircles, false);

// first frame


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.