HTML5 Canvas Flood Fill

Messing around in JS today (surprising eh?) making an HTML5 vs of rampart-ish. The more I do the less it becomes like rampart. Today I decied to tackle the flood fill portion which is a major part of the gameplay.

Here is the workhorse function

function floodFill(mapData, x, y, oldVal, newVal){
    var mapWidth = mapData.length,
        mapHeight = mapData[0].length;

        if(oldVal == null){

        if(mapData[x][y] !== oldVal){
            return true;

    mapData[x][y] = newVal;

    if (x > 0){
        floodFill(mapData, x-1, y, oldVal, newVal);

    if(y > 0){
        floodFill(mapData, x, y-1, oldVal, newVal);

    if(x < mapWidth-1){
        floodFill(mapData, x+1, y, oldVal, newVal);

    if(y < mapHeight-1){
        floodFill(mapData, x, y+1, oldVal, newVal);

Which is called by doing this

floodFill(map, 3,3,null,2);

map refers to a 2 dimensional array which contains the data, in my case, 0 or 1. The second 2 parameters are the x and y of where to start on the map, null is the initial value to start with, and 2 is the change value parameter, which tells the function to change any tile with the value 0, to 2.

The function is pretty straightforward it recursively checks each points north/south/east/west neighbor until it encounters a neighbors whos value is not 0. Try the code for yourself. I have portions commented out that generate a larger random map to fill for testing purposes. Anything beyond 256×256 has issues within chrome due to stack size restrictions.

Below is the result of the function.

And here is a link to some great information on recursive floodfilling

Leave a Reply

Your email address will not be published. Required fields are marked *