使用HTML5在画布上绘制图钉

我需要画一个大头针：在画布上使用HTML5

以下是我所拥有的：

我遇到的问题是我不知道如何延伸两端

---

提前感谢

下面是一个使用路径命令绘制管脚的示例

假设您有一个定义管脚x、y和颜色的对象：

var pin = { x:x, y:y, color:color };

然后你可以像这样画那个大头针：

function drawPin(pin){

    ctx.save();
    ctx.translate(pin.x,pin.y);

    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.bezierCurveTo(2,-10,-20,-25,0,-30);
    ctx.bezierCurveTo(20,-25,-2,-10,0,0);
    ctx.fillStyle=pin.color;
    ctx.fill();
    ctx.strokeStyle="black";
    ctx.lineWidth=1.5;
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0,-21,3,0,Math.PI*2);
    ctx.closePath();
    ctx.fillStyle="black";
    ctx.fill();

    ctx.restore();
}

---

伟大的你的问题是什么？你已经尝试了什么，你在哪里卡住了，我们可以给你反馈的JSFIDLE在哪里？这很好。有没有办法增加/减少pin码的长度？你可以在代码中调整数字以适应你的设计需要。效果很好。谢谢：））

function drawPin(pin){

    ctx.save();
    ctx.translate(pin.x,pin.y);

    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.bezierCurveTo(2,-10,-20,-25,0,-30);
    ctx.bezierCurveTo(20,-25,-2,-10,0,0);
    ctx.fillStyle=pin.color;
    ctx.fill();
    ctx.strokeStyle="black";
    ctx.lineWidth=1.5;
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0,-21,3,0,Math.PI*2);
    ctx.closePath();
    ctx.fillStyle="black";
    ctx.fill();

    ctx.restore();
}