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);
}