HTML5 Canvas Sample – Building a maze

There are a lot of features that HTML5 bring. What makes canvas popular?

Canvas provides a screen area onto which you could draw 2D shapes and images. The set of APIs are simple. But the strength of the canvas comes from how you could manipulate it using javascript.

(Please view the canvas in action here )

We start by defining a canvas. Note that the canvas element would be rendered only if your browser supports it.

<canvas id="canvas" width="100" height="100">Your browser does not support canvas.</canvas>

Next, we define an array in javascript to hold the maze data, initialize it and start building our maze by venturing out into the first cell.

 var board = new Array();
 
    function maze() {
        init();            //initialize the maze
        explorePath(1,1);           //start exploring
    }
 
    function init() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
            context = canvas.getContext("2d");
            //paint the maze black
        }
        for(i=0; i< SIZE; i++) {
            board[i] = new Array();
            for(j=0; j<SIZE; j++) {
                board[i][j] = 0; //fill the board array with zeroes
            }
        }
    }

For the explorePath method, we use a recursive algorithm:

Paint the cell white
Initialize options list {UP, DOWN, FORWARD, BACKWARD}
While options:
    Select option randomly
    If valid option - Cell is unoccupied, we don't create tunnels etc.
         explorePath(option)
     remove explore option from list
end loop.

In short, we are doing a back-tracking traversal (DFS) of the option tree.

The algorithm works fine until we try to put a delay between each explorePath call to get that nice effect.
You see, it is not really easy to sleep() in javascript. There is no equivalent of Java sleep.

What we could do is this:

  setTimeOut('explorePath()', 100);

This would call the explorePath after a delay of 100 milliseconds. But, the call to setTimeOut() is non-blocking and it would continue execution while scheduling explorePath() to be executed after 100 milliseconds.

We could maintain our own call stack and choose not to call the explorePath() recursively. But it is easier to just push the maze positions to be painted white into a stack and continue execution. Once the display stack is ready we could pop from it and render onto canvas in a delayed manner using setTimeOut().

Finally, we could add a nice touch to the maze by not changing its directions too often, but in a timely manner based on a seeded probability.

Here’s the complete source (right click and view source). And don’t forget to save your maze as a PNG (again, right click and save).