Canvas/JavaScript-鼠标单击时翻转正方形的颜色

下面是创建一个由白色/黑色正方形随机填充的6x6网格的代码。当您单击一个正方形时，它会在控制台中显示给定正方形的数组中的位置。我正在努力的是，一旦你点击一个正方形，它就会翻转颜色（例如，当你点击白色正方形时，它会变成黑色，等等）。这个变化也应该更新数组，因为最后我会检查得到的图案是否有对称线。

// Create canvas
var canvas = document.getElementById('canvas');
ctx = canvas.getContext("2d");
var canvasCreate = function(w, h) {
    canvas.width = w;
    canvas.height = h;
};
function resetCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid(genArray(6));
}
// Generate a 6x6 array of 0s or 1s
function genArray(aSize) {
    a = new Array();
    for (var i=0;i<aSize;i++) {
        a[i] = new Array();
        for (var j=0;j<aSize;j++) {
            a[i][j] = Math.floor(Math.random() * 2);
        }
    }
    return a
}
function drawGrid(arr) {
    var n = 6;
    for (var i=0;i<n;i++) {
        for (var j=0;j<n;j++) {
            ctx.beginPath();
            ctx.strokeStyle = '#555';
            if (arr[i][j] === 1) {
                ctx.fillRect(i*50, j*50, 50, 50);
            }
            ctx.rect(i * 50, j * 50, 50, 50);
            ctx.stroke();
        }
    }
    // Get mouse position within canvas
    function mouseClick(e) {
        var mouseX, mouseY;
        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
        var gridX = Math.floor(mouseX / 50);
        var gridY = Math.floor(mouseY / 50);
        console.log(gridX, gridY);
        var xy = arr[gridX][gridY];
        if (xy == 0) {
            xy = 1;
            console.log("white");
        }
        else if (xy == 1) {
            xy = 0;
            console.log("black");
        }
        //
    }
    canvas.addEventListener('mousedown', mouseClick, false);
};

arr = genArray(6);
canvasCreate(300, 300);
drawGrid(arr);

以及相应的html:

<button onclick="resetCanvas()">Reset</button>
<canvas id="canvas"></canvas>

编辑：显示我尝试过的内容：

var xy = arr[gridX][gridY];
        if (xy == 0) {
            xy = 1;
            console.log("white");
            drawGrid(arr);
        }
        else if (xy == 1) {
            xy = 0;
            console.log("black");
            drawGrid(arr);
        }

正如您在上面看到的，数组中的位置被识别（例如（0，3）），然后值在0和1之间发生变化，整个网格应该被重新绘制。它改变了一些方块的颜色，但不是以我想要的方式。此外（点击几下后，它似乎阻塞了浏览器，表明我做错了什么

编辑2：根据下面的评论，我已将其更新为：

var xy = arr[gridX][gridY];
        if (xy == 0) {
            arr[gridX][gridY] = 1;
            console.log("white");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawGrid(arr);
        }
        else if (xy == 1) {
            arr[gridX][gridY] = 0;
            console.log("black");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawGrid(arr);
        }

尽管如此，它还是出现了故障，导致浏览器没有响应。