начать с новым HTML5 холст

Question

следующий код очищает холст на кнопку мыши

context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears 

, но, когда я пытаюсь перерисовать на нем, старый рисунок появляется, который я не хочу, чтобы это. Я хочу, чтобы начать рисовать на свежий чистый холст

http://jsfiddle.net/umwc5/

Как достичь этого?

в случае, если вы хотите увидеть весь код ..

$(function() { 
    var c = document.getElementById("canvas"); 
    var context = c.getContext("2d"); 
    var clickX = new Array(); 
    var clickY = new Array(); 
    var clickDrag = new Array(); 
    var paint; 

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


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

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

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

    $('#clear').click(function (e) { 
     e.stopPropagation(); 
     context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears 

    }); 

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

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

     context.strokeStyle = "#000000"; 
     context.lineJoin = "round"; 
     context.lineWidth = 2; 

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

    }); 

Answer 1

Вы должны очистить следующие массивы clickX, clickY и clickDrag:

context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
clickX = []; // clear mouse "logs" 
clickY = []; 
clickDrag = []; 

Working jsFiddle

Когда вы нажимаете или перетаскиваете мышь, addClick, который заполняет массивы clickX, clickY и clickDrag с координатами мыши. Когда вызывается метод redraw, он снова отображает точки на холсте. Таким образом, очистка этих массивов позволит решить вашу проблему.