I have an HTML5 canvas that allows user to draw various shapes and a brush feature allowing the user to freehand. I am using the command pattern for these implementations. The problem I am facing is the "undo" functionality. It works perfectly fine for all the other commands however when it comes to the "brush" there seems to be an issue with it. 

The way the brush works is it stores points with each drag of the mouse, once a new point is added the entire array of points are redrawn on the screen. Only when the user releases the mouse does the drawing stop. You can probably see the problem immediately, the older the points the more they get redrawn on the screen. This causes the line to look much darker in color than it actually is. 

My solution is to only connect the last point n-1 with point n-2 however that literally only redraws the last 2 points. I do not understand fully how the canvas is working and why this method does not work YET redrawing overtop points seems to work...

Here is some code outlining the key parts. 

```
BrushStrat.prototype.mousemove=function(event){
    if(this.command!=null){
            //add this point to the list
        this.command.addPoint({x:event.canvasX, y:event.canvasY});
            //redraw all points
        this.command.draw(this.paint.context);
    }
}

BrushCommand.prototype.draw=function(context){
    if(this.points.length==0){
        return;
    }

    context.beginPath(); 
    context.strokeStyle = this.strokeStyle;
    context.lineWidth=this.lineWidth;
    //start from the first point
    context.moveTo(this.points[0].x,this.points[0].y);
    //redraw all subsequent points
    for(var i=1;i<this.points.length;i++){
        context.lineTo(this.points[i].x, this.points[i].y);
    }
    context.stroke();
}

```