Interactive HTML5 Canvas Demonstration of Dijkstra's Algorithm

This is an implementation of Dijkstra's shortest path algorithm using the HTML5 canvas element, Javascript, and jQuery. You can add or remove blocks by pressing the 'b' key while mousing over the desired square, which will alter the path.

When you click a square you see the shortest mathematically calculated paths to each space on the board, including the desired square, which is how Dijkstra's algorithm operates. The shortest path to the desired square is then left on the display.

If you try to get to a square that is impossible to reach, those squares are ignored in the shortest path calculation, and the circle teleports to the new square so it cannot get stuck.

Tested on: Firefox 4.0, Chrome 11.0.6x, Internet Explorer 9.0, Safari 5.05

Known Bugs: Sometimes the mouse position gets corrupted using Safari browsers only. If the mouse is not highlighting the correct square, try refreshing the page.


Press the 'b' key to add or remove blocks

You are not using a browser that supports the "canvas" element. Please upgrade to a new browser such as Firefox 4.

James Seibel
seibeljames@gmail.com