Q:

Disable click EventListener

I am trying to learn HTML5 canvas. The first image requires seven clicks before there is a cat gif eating the cookies appears. Initially, I bind a click EventListener to the image. After the cat gif eating cookies appears, I am unable to disable the click. Any suggestions?
cat.html
<!DOCTYPE html>
<html>
    <head>
        <title>Cat Animation</title>
    </head>
    <body>
        <div id="canvasDiv"></div>
        <script type="text/javascript" src="cat.js"></script>
        <script type="text/javascript">
            prepareCanvas(document.getElementById("canvasDiv"), 700, 700);
            document.getElementById("canvas").addEventListener("click", function(){console.log("clicked");loadImage("cat");console.log(total);console.log(currentFrame);}, false);
        </script>
    </body>
</html>

cat.js
var canvas;
var context;
var image;
var currentFrame = 0;
var frames = 4;
var width = 350;
var height = 300;
var total = 0
var finalFrame = 0;

function prepareCanvas(canvasDiv, canvasWidth, canvasHeight)
{
    canvas = document.createElement('canvas');
    canvas.setAttribute('width', canvasWidth);
    canvas.setAttribute('height', canvasHeight);
    canvas.setAttribute('id', 'canvas');
    canvasDiv.appendChild(canvas);

    context = canvas.getContext("2d");
    canvas.width = canvas.width;//clears canvas
    loadImage("cat");
};

function loadImage(name)
{
    image = new Image();
    image.src = "images/cat" + currentFrame +".png";
        draw("one");
    if (currentFrame == 3 && total == 1){
        setInterval(finaldraw,110);
    }
};

function draw(params)
{
    image.onload = function(){
        canvas.width = canvas.width;
        context.drawImage(image,0,0);
        currentFrame++;
        if (currentFrame == 4) {
            currentFrame = 0;
            total++;
        };
    }
};

function finaldraw(){
    document.getElementById("canvas").removeEventListener("click",function(){});
    image.src = "images/eatsheet.png";
    image.onload = function(){
        context.drawImage(image,350*finalFrame,0,width,350,0,0,width,350);
        if (finalFrame == frames) {
            finalFrame = 0;
        } else {
            finalFrame = finalFrame + 1;            
        }
    }
};

A:

You need to remove the exact same function object instance you used when you added the listener. A function expression evaluates to a new function object, and that doesn't match the one registered originally, even if it had the exact same content (which in your case is not...)
The solution is to have a named function or a variable with the function value assigned to it, and use that same identifier both in the add, and the remove calls.

