如何在Microsoft Windows绘制应用程序中使用鼠标绘制三角形？

Question

我已经编写了代码但是它用于绘制矩形，我需要在onClick时通过拖动鼠标来绘制三角形，就像在windows paint App中一样。如何拖动鼠标以便三角形自动形成？

    initDraw(document.getElementById('canvas'));
    function initDraw(canvas) {
var mouse = {
    x: 0,
    y: 0,
    startX: 0,
    startY: 0
};
function setMousePosition(e) { // setting the postion for mouse
    var ev = e || window.event; 
    if (ev.pageX) { 
        mouse.x = ev.pageX + window.pageXOffset;
        mouse.y = ev.pageY + window.pageYOffset;

    } else if (ev.clientX) { 

        mouse.x = ev.clientX + document.body.scrollLeft;
        mouse.z = ev.clientZ + document.body.scrollLeft;

    } };
var element = null;    
canvas.onmousemove = function (e) {// on move
    setMousePosition(e);

    if (element !== null) {
        element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
        element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
        element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
        element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        }}};

canvas.onclick = function (e) {// on click function
    if (element !== null) {
        element = null;
        canvas.style.cursor = "default";
        console.log("finsihed.");
    } else {
        console.log("begun.");
        mouse.startX = mouse.x;
        mouse.startY = mouse.y;
        element = document.createElement('div');
        element.className = 'triangle'
        element.style.left = mouse.x + 'px';
        element.style.top = mouse.y + 'px';
        canvas.appendChild(element)
        canvas.style.cursor = "crosshair";
        }}}