Simple color flooding game in Javascript/HTML5 canvas area I'm learining JS. I have prepared a simple color flooding game, like Pixelated.

The engine below works, though scoring is not implemented.  Please help me find out how this code could be made better, more idiomatic JavaScript, or more efficient.



// global variables
var canvas = document.getElementById("game");
var context = canvas.getContext("2d");
var colors = ["#FF7F34", "#FF4D79", "#FFEF42", "#78E853", "#64C4FF", "#954FFF"];
var squareSize = 20;
var canvasSize = 14;
var buttonSize = 30;
var spaceSize = 15;
var board = [];
var currentColor = 0;

// draw 14x14 board of randomly coloured squares and add each square to 2d array 'board'
function drawBoard(colors) {
    // draw main board
    for (var i = 0; i &lt; canvasSize; i++) {
        var boardColumn = [];
        for (var j = 0; j &lt; canvasSize; j++) {
            colorId = Math.floor((Math.random() * 6)) + 1;
            context.fillStyle = colors[colorId - 1];   
            context.fillRect(i*squareSize, j*squareSize, squareSize, squareSize);
             if (i == 0 &amp;&amp; j == 0) {
                currentColor = colorId;
                colorId = 0;
            }
            boardColumn.push(colorId);
        }
        board.push(boardColumn);
    }    
    // draw controls
    colors.forEach(function (value, i) {
        context.fillStyle = value;
        context.fillRect(i * (buttonSize + spaceSize) + spaceSize, squareSize * canvasSize + spaceSize, buttonSize, buttonSize);
    });
    expandOcean(currentColor);
    redrawBoard();
}
// click handler
function clickToColor(event) {
  var color = 0;
  var x = event.x;
  var y = event.y;
  x -= canvas.offsetLeft;
  y -= canvas.offsetTop;
  var controlsOffsetTop = squareSize * canvasSize + spaceSize; 
  colors.forEach(function(value, i) {
    if (x &gt; (spaceSize + i * (spaceSize + buttonSize)) &amp;&amp; x &lt;= ((i + 1) * (spaceSize + buttonSize)) &amp;&amp; y &gt; controlsOffsetTop &amp;&amp; y &lt;= (controlsOffsetTop + buttonSize)) color = i + 1;
  });
    if (color != 0 &amp;&amp; color != currentColor) 
        {
            currentColor = color;
            expandOcean(currentColor);
            redrawBoard();
        }
}
// flooding with chosen color
function expandOcean(color) {
    var touched = false;
    board.forEach(function(column, i) {
        column.forEach(function(value, j) {
            if (j + 1 &lt; canvasSize &amp;&amp; ((column[j] == 0 &amp;&amp; column[j+1] == color) || (column[j] == color &amp;&amp; column[j+1] == 0))) {
                board[i][j+1] = 0;
                board[i][j] = 0;
                touched = true;
            }
        });
    });
    board.forEach(function(column, i) {
        column.forEach(function(value, j) {
            if (i + 1 &lt; canvasSize &amp;&amp; ((column[j] == 0 &amp;&amp; board[i + 1][j] == color) || (column[j] == color &amp;&amp; board[i+1][j] == 0))) {
                board[i + 1][j] = 0;
                board[i][j] = 0;
                touched = true;
            }
        });
    });
    if (touched == true) expandOcean(color);
}

function redrawBoard() {
    board.forEach(function(column, i) {
        column.forEach(function(value, j) {
            if (board[i][j] == 0) {
                context.fillStyle = colors[currentColor - 1];
            } else {
                context.fillStyle = colors[board[i][j] - 1];
            }
            context.fillRect(i*squareSize, j*squareSize, squareSize, squareSize);
        }); 
    }); 
}

drawBoard(colors);
canvas.addEventListener('click', clickToColor, false);
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
    &lt;canvas id="game" width="280" height="400"&gt;&lt;/canvas&gt;
    &lt;script type="text/javascript" src="game.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
This would be so much easier with the use of a table or divs. You could then create an array of objects (one object per square). Ex: 

[
    {
        "className": "orange",
        "x": 0,
        "y": 0
    }
];


By doing this, you can match the class of the surrounding objects, rather than changing the color directly. Hope this helps.