Javascript 无法清除画布

我正试图清除画布以便重新绘制，它变得清晰，当我们尝试重新绘制时，前面的事情又回来了

这是我的密码：

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

var drawingApp=（函数（）{
//声明变量
var canvas，
拉票，
上下文
画布宽度=200，
画布高度=200，
单击X=[]，
clickY=[]，
单击拖动=[]，
油漆=假；
//初始化函数
函数init（）{
canvasDiv=document.getElementById（'canvasDiv'）；
canvas=document.createElement（'canvas'）；
canvas.setAttribute（'width'，canvasWidth）；
canvas.setAttribute（'height'，canvasHeight）；
setAttribute（'id'，'canvas'）；
canvasDiv.appendChild（canvas）；
if（G_vmlCanvasManager的类型！=“未定义”）{
canvas=G_vmlCanvasManager.initElement（canvas）；
}
context=canvas.getContext（“2d”）；
loadEvents（）；//加载事件
}
函数loadEvents（）{
//鼠标按下事件
$（“#画布”）.mousedown（函数（e）{
var mouseX=e.pageX-this.offsetLeft；
var mouseY=e.pageY-this.offsetTop；
油漆=真；
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）；
重画（）；
});
//鼠标移动事件
$（'#canvas'）.mousemove（函数（e）{
如果（油漆）{
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop，true）；
重画（）；
}
});
//鼠标移动事件
$（'#canvas'）.mouseup（函数（e）{
油漆=假；
});
//鼠标离开事件
$（'#canvas'）.mouseleave（函数（e）{
油漆=假；
});
}
//添加点击功能
功能添加单击（x、y、拖动）{
点击x，推送（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
}
//重画函数
函数重画（）{
context.clearRect（0,0，context.canvas.width，context.canvas.height）；//清除画布
context.strokeStyle=“#df4b26”；
context.lineJoin=“round”；
context.lineWidth=5；
对于（变量i=0；i

---

请查看我哪里出错

使用擦除功能清除画布时，无法清除

clickX

、

clickY

和

clickDrag

变量。因此，下次它绘制时，仍然会绘制旧数据

更新的JSFIDLE-

改变的代码

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