Cannot clear the canvas

Question

I am trying to clear the canvas for redrawing, it gets clear and when we try to redraw, the previous thing comes back.

Here is my code:

var drawingApp = (function () {
    //declaring Variables
    var canvas,
        canvasDiv,
        context,
        canvasWidth = 200,
        canvasHeight = 200,
        clickX = [],
        clickY = [],
        clickDrag = [],
        paint = false;

    //Initalisation Function
    function init() {
        canvasDiv = document.getElementById('canvasDiv');
        canvas = document.createElement('canvas');
        canvas.setAttribute('width', canvasWidth);
        canvas.setAttribute('height', canvasHeight);
        canvas.setAttribute('id', 'canvas');
        canvasDiv.appendChild(canvas);
        if (typeof G_vmlCanvasManager != 'undefined') {
            canvas = G_vmlCanvasManager.initElement(canvas);
        }
        context = canvas.getContext("2d");
        loadEvents(); //Load events
    }

    function loadEvents() {
        //Mouse down Event
        $('#canvas').mousedown(function (e) {
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;

            paint = true;
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
            redraw();
        });

        //Mouse Move Event
        $('#canvas').mousemove(function (e) {
            if (paint) {
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
            }
        });

        //Mouse Up Event
        $('#canvas').mouseup(function (e) {
            paint = false;
        });

        //Mouse Leave Event
        $('#canvas').mouseleave(function (e) {
            paint = false;
        });

    }

    //Add Click Function
    function addClick(x, y, dragging) {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
    }

    //Redraw Function
    function redraw() {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

        context.strokeStyle = "#df4b26";
        context.lineJoin = "round";
        context.lineWidth = 5;

        for (var i = 0; i < clickX.length; i++) {
            context.beginPath();
            if (clickDrag[i] && i) {
                context.moveTo(clickX[i - 1], clickY[i - 1]);
            } else {
                context.moveTo(clickX[i] - 1, clickY[i]);
            }
            context.lineTo(clickX[i], clickY[i]);
            context.closePath();
            context.stroke();
        }
    }

    // Clears the canvas.
    function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

    return {
        init: init,
        erase: clearCanvas
    };
})();

$(function () {
    drawingApp.init();
});

Here is my fiddle

Please see where m getting wrong

Answer 1

When you clear your canvas using the erase function, you fail to clear the clickX, clickY and clickDrag variables. So the next time it draws it still draws the old data.

Updated JSFiddle - http://jsfiddle.net/P8acZ/6/

The code that changed

function clearCanvas() {
    clickDrag = [];
    clickX = [];
    clickY = [];
    context.clearRect(0, 0, canvas.width, canvas.height);
}