Stopping more than one instance of a function running at a time

Question

I am fairly new to JavaScript and have searched everywhere for an answer to my question and cant seem to find anything related at all. This tells me that I'm missing something with my understanding of how my program works.

I have written a small game where the player navigates through a randomly generated maze using a gameloop that checks keydown events every x milliseconds. The game has a difficulty dropdown menu and then the game is started my clicking a button that calls a function to create a canvas where the game is drawn.

My problem is that when the button is clicked again to create a new maze without reloading the page, the gameloop for the original maze is still running and so key events are registered twice. This is causing some unexpected behavior. It's as though every time the button is clicked, a new instance of the function is running. Is there some way that each time the button is clicked I can set it to stop the previous game function?

var canvas;
var div;
var mazeGenButton;

$(document).ready(function () {
    canvas = null;
    div = document.getElementById('canvascontainer');;

    mazeGenButton = document.getElementById("mazeGenButton");
    mazeGenButton.onclick = createInstance;
});

function createInstance() {
    if (canvas != null) {
        div.removeChild(document.getElementById("myCanvas"));
    }
    canvas = document.createElement('canvas');
    canvas.id = "myCanvas";
    canvas.width = 1000;
    canvas.height = 1000;
    div.appendChild(canvas);
    drawMaze();
};

var drawMaze = function () {

//code here to create the game(not posted)

//here is the Key listener - not sure if it's related
var keyState = {};
    window.addEventListener('keydown', function (e) {
        keyState[e.keyCode || e.which] = true;
    }, true);
    window.addEventListener('keyup', function (e) {
        keyState[e.keyCode || e.which] = false;
    }, true);

    function gameLoop() {
        //left
        if (keyState[37] || keyState[65]) {
            if (isLegalMove(playerXPos - 1, playerYPos)) {
                grid[playerXPos][playerYPos].removePlayerCell();
                playerXPos -= 1;
                grid[playerXPos][playerYPos].setPlayerCell();
            }
        }
        //right
        if (keyState[39] || keyState[68]) {
            if (isLegalMove(playerXPos + 1, playerYPos)) {
                grid[playerXPos][playerYPos].removePlayerCell();
                playerXPos += 1;
                grid[playerXPos][playerYPos].setPlayerCell();
            }
        }
        //up
        if (keyState[38] || keyState[87]) {
            if (isLegalMove(playerXPos, playerYPos - 1)) {
                grid[playerXPos][playerYPos].removePlayerCell();
                playerYPos -= 1;
                grid[playerXPos][playerYPos].setPlayerCell();
            }
        }
        //down
        if (keyState[40] || keyState[83]) {
            if (isLegalMove(playerXPos, playerYPos + 1)) {
                grid[playerXPos][playerYPos].removePlayerCell();
                playerYPos += 1;
                grid[playerXPos][playerYPos].setPlayerCell();
            }
        }

        drawSurroundingCells();

        setTimeout(gameLoop, 50);
    }
}