Implement polygon tool on HTML5 canvas

See more:

Javascript

Canvas

I am trying to imitate polygon tool in paint to allow user to draw same on my canvas. Below is what i have coded so far but some how it is not exact same as paint tool. Also i would like to know is there any way to fill this shape once it's drawn. Can anyone please help.

var startPointX = "", startPointY = "", endpointX, endpointY, isnewShape = false;
function tool_polygon() {
var tool = this;
this.started = false;

this.mousedown = function (ev) {
    tool.started = true;
    tool.x0 = ev.offsetX;
    tool.y0 = ev.offsetY;


    console.log('mousedown');
    if (startPointX == "" && startPointY == "") {
        startPointX = tool.x0;
        startPointY = tool.y0;
    }
    console.log('startPointX ' + startPointX + ' startPointY ' + startPointY + ' ev.offsetX ' + ev.offsetX + ' ev.offsetY ' + ev.offsetY + ' isnewShape ' + isnewShape);
    //if ((Math.abs(startPointX - ev.offsetX) < 5) && (Math.abs(startPointY - ev.offsetY) < 5) && (startPointX != ev.offsetX && startPointY != ev.offsetY) && !isnewShape) {

    //keeping average gap of 5 pixels as the canvas is smaller and can't get exact start point
    if ((Math.abs(startPointX - ev.offsetX) < 5) && (Math.abs(startPointY - ev.offsetY) < 5) && isnewShape) {
        alert('point matched');

        isnewShape = false ;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(endpointX, endpointY);
        //context.moveTo(ev.offsetX, ev.offsetY);
        context.lineTo(startPointX, startPointY);
        startPointX = "";
        startPointY = "";
        endpointX = "";
        endpointY = "";
        context.strokeStyle = strokeColor;
        context.stroke();
        context.closePath();
        img_update();
        tool.started = false;
    }
    else {
        if (startPointX == "" || startPointY == "" || endpointX == "" || endpointY == "")
            return;

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(endpointX, endpointY);
        isnewShape = false;
        context.lineTo(ev.offsetX, ev.offsetY);
        endpointX = ev.offsetX;
        endpointY = ev.offsetY;
        context.strokeStyle = strokeColor;
        context.stroke();
        context.closePath();
        img_update();
    }


};

this.mousemove = function (ev) {
    if (!tool.started) {
        return;
    }
    console.log('mousemove');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.moveTo(startPointX, startPointY);
    context.lineTo(ev.offsetX, ev.offsetY);
    endpointX = ev.offsetX;
    endpointY = ev.offsetY;
    context.strokeStyle = strokeColor;
    context.stroke();
    context.closePath();
};

this.mouseup = function (ev) {
    if (tool.started) {
        console.log('mouseup');
       isnewShape = true;
        tool.started = false;
        img_update();
    }
};
}