Pathfinding with JavaScript

This example doesn't include any pre-computed nodes or vertices, but instead reads the image pixel by pixel (3x3) and identifies where water is present and adds nodes and vertices accordingly. The shortest path algorithm used in this example is the A* search algorithm, which uses a best-first approach to find the most cost effective route. If there is no solution, it ends up running through all the 87,134 nodes in this map, effectively doing the same search as Dijkstra's algorithm does, before concluding that there is no result.

The performance of the search could be significantly improved by pre-assigning nodes in relevant positions (like intersections in real road-networks), instead of assigning a node to every single position that is accessible. It would lower the number of nodes to traverse and inaccessible nodes wouldn't be present to begin with.

As this example uses canvas to create the nodes, IE 9 or higher is required. For non-canvas examples, check out these examples.