Why is clickDrag.push(dragging) needed?
I came across below code while looking for canvas drawing. [http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/][1]

  

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

    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;
    
    function addClick(x, y, dragging)
    {
      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);
    }
    function redraw(){
      canvas.width = canvas.width; // 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();
      }
    }

When mousedown() event fires addClick() fuction is called by passing x and y values. (x and y co-ords). **No value** for **var dragging** is passed.

Then redraw() is called where `if(clickDrag[i] && i){..}` condition is tested.

My question is how the clikDrag[] array is getting values and why is it needed when we have x and y co-ords.


  [1]: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
Why is clickDrag.push(dragging) needed?
===

I came across below code while looking for canvas drawing. [http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/][1]

  

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

    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;
    
    function addClick(x, y, dragging)
    {
      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);
    }
    function redraw(){
      canvas.width = canvas.width; // 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();
      }
    }

When mousedown() event fires addClick() fuction is called by passing x and y values. (x and y co-ords). **No value** for **var dragging** is passed.

Then redraw() is called where `if(clickDrag[i] && i){..}` condition is tested.

My question is how the clikDrag[] array is getting values and why is it needed when we have x and y co-ords.


  [1]: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/