Javascript 当使用鼠标单击动态绘制多边形时，如何在画布中拖放多边形？

当使用JavaScript和HTML通过鼠标单击动态绘制多边形时，如何在画布中拖放多边形？我试过：

<div class="draggable">
    <button id=done hidden>Click when done assigning points>
    <canvas id="canvas" width=450 height=450 class="draggable"></canvas>
</div>

完成分配点后单击>

将坐标保存在js变量中，然后单击鼠标在画布上重新绘制多边形

以正方形为例：