canvas在背景图上画点连成不规则多边形

用canvas画点，多个点连成一个不规则的图形

<div class="workshopCanvas" @click="selectPoint">
          <img style="position: absolute;left: 0px;top: 0px;width: 660px;height: 260px;" :src="ctxPic" />
          <canvas style="position: absolute;" id="myCanvas" width="660px" height="260px"></canvas>
        </div>

这个图片的src是后台返回的，动态的

// 在画布上画点,我的项目上先在画布上用户点四个点，当四个点点击完毕，四个点消失，然后连成一个带有背景色的不规则四边形
selectPoint($el, e) {
   
      if (this.actionStatus == "detail") {
   
        return false;
      }
      let offsetListCopy = this.offsetList;
      if (
        offsetListCopy.offsetPointLb != "" &&
        offsetListCopy.offsetPointLt != "" &&
        offsetListCopy.offsetPointRb != "" &&
        offsetListCopy.offsetPointRt != ""
      ) {
   
        this.pointNum++;
        let obj = {
   };
        obj.x = $el.offsetX;
        obj.y = $el.offsetY;
        let _this =</