fill in between 2 points using mouse coordinates

See more:

Javascript

HTML5

Canvas

I am trying to to do is if you hold the shift key when moving the mouse from one point to another that it would fill in between them. I don't seem to know how to do it. I have so far if someone could help me please?

//Set the draw Function
function DrawCanvas(xpos, ypos, PressedDown,PressedShift) 
{
	var cwidth = document.getElementById('canvasWidth').value;
	var ccolour = document.getElementById('canvasColour').value;
	//Check if Mouse is Pressed Down
    if (PressedDown) 
	{
		//Start drawing a new path
        canvascontext.beginPath();
		//Set Stroke Style
        canvascontext.strokeStyle = ccolour;
		//Set Line Tickness
        canvascontext.lineWidth = cwidth;
		//Set the Linse Style to Default Round
        canvascontext.lineJoin = "round";
		//Go to the Current Point of the Cursor
        canvascontext.moveTo(currentXpos, currentYpos);
		//Draw Straight Line From Current Position
        canvascontext.lineTo(xpos, ypos);
		
		if(PressedShift)
		{
			canvascontext.beginPath();
			canvascontext.fillStyle="#e4e8e3";
			canvascontext.arc(currentXpos, currentYpos,50,0,currentYpos, false);
			//End the Current Path
			canvascontext.fill();		
		}

        canvascontext.closePath();
		//Make the Drawing Visible
        canvascontext.stroke();
    }
	
	//Set X and Y Positions to Current X and Y Positions
    currentXpos = xpos;
    currentYpos = ypos;
}