使用鼠标事件在画布上绘制多边形

Question

我想让用户在画布上绘制多边形，就像paint中的工具一样.Below是我的代码。 问题是当用户拖动第一行并且之后只需单击以完成形状时它可以正常工作，但是当用户在完成多边形之前拖动下一行逻辑失败时。任何人都可以更正我的代码。

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

    this.mousedown = function (ev) {
        tool.started = true;
        tool.x0 = ev._x;
        tool.y0 = ev._y;

        if ((Math.abs(startPointX - ev._x) < 5) && (Math.abs(startPointY - ev._y) < 5) && (startPointX != ev._x && startPointY != ev._y) && !isnewShape) {
            alert('point matched');
            startPointX = "";
            startPointY = "";
            isnewShape = true;
            context.clearRect(0, 0, canvas.width, canvas.height);

            context.beginPath();
            context.moveTo(endpointX, endpointY);

            context.lineTo(ev._x, ev._y);
            endpointX = ev._x;
            endpointY = ev._y;
            context.stroke();
            context.closePath();
            img_update();
            tool.started = false;
        }
        else {
            //                console.log(isnewShape);

            if (startPointX == "" || startPointY == "")
                return;

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

            context.beginPath();
            context.moveTo(endpointX, endpointY);
            isnewShape = false;
            context.lineTo(ev._x, ev._y);
            endpointX = ev._x;
            endpointY = ev._y;
            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.lineTo(ev._x, ev._y);
        endpointX = ev._x;
        endpointY = ev._y;
        context.stroke();
        context.closePath();
    };

    this.mouseup = function (ev) {
        if (tool.started) {

            if (startPointX == "" && startPointY == "") {

                startPointX = tool.x0;
                startPointY = tool.y0;

            }

            tool.started = false;
            img_update();
        }
    };
};

function init() {
    // Find the canvas element.
    canvaso = document.getElementById('imageView');
    if (!canvaso) {
        alert('Error: I cannot find the canvas element!');
        return;
    }

    if (!canvaso.getContext) {
        alert('Error: no canvas.getContext!');
        return;
    }

    // Get the 2D canvas context.
    contexto = canvaso.getContext('2d');
    if (!contexto) {
        alert('Error: failed to getContext!');
        return;
    }

    // Add the temporary canvas.
    var container = canvaso.parentNode;
    canvas = document.createElement('canvas');
    if (!canvas) {
        alert('Error: I cannot create a new canvas element!');
        return;
    }

    canvas.id = 'imageTemp';
    canvas.width = canvaso.width;
    canvas.height = canvaso.height;
    container.appendChild(canvas);

    context = canvas.getContext('2d');

    // Get the tool select input.
    var tool_select = document.getElementById('dtool');
    if (!tool_select) {
        alert('Error: failed to get the dtool element!');
        return;
    }
    tool_select.addEventListener('change', ev_tool_change, false);

    // Activate the default tool.
    if (tools[tool_default]) {
        tool = new tools[tool_default]();
        tool_select.value = tool_default;
    }

    // Attach the mousedown, mousemove and mouseup event listeners.
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup', ev_canvas, false);
}

// The general-purpose event handler. This function just determines the mouse 
// position relative to the canvas element.
function ev_canvas(ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
        ev._x = ev.layerX;
        ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        ev._x = ev.offsetX;
        ev._y = ev.offsetY;
    }

    // Call the event handler of the tool.
    var func = tool[ev.type];
    if (func) {
        func(ev);
    }
}

// The event handler for any changes made to the tool selector.
function ev_tool_change(ev) {
    if (tools[this.value]) {
        tool = new tools[this.value]();
    }
}

// This function draws the #imageTemp canvas on top of #imageView, after which 
// #imageTemp is cleared. This function is called each time when the user 
// completes a drawing operation.
function img_update() {
    contexto.drawImage(canvas, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
}