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 = this;
        if (this.pointData.length == 4) {
          return false;
        } else {
          _this.pointData.push(obj);
          let color = "#6495ED";
          if (_this.pointNum == 1) {
            _this.detailData.offsetPointLt = JSON.stringify(_this.pointData[0]);
          }
          if (_this.pointNum == 2) {
            _this.detailData.offsetPointLb = JSON.stringify(_this.pointData[1]);
          }
          if (_this.pointNum == 3) {
            _this.detailData.offsetPointRt = JSON.stringify(_this.pointData[2]);
          }
          if (_this.pointNum == 4) {
            _this.detailData.offsetPointRb = JSON.stringify(_this.pointData[3]);
          }

          if (_this.pointNum < 4) {
            var img = new Image();
            img.crossOrigin = "Anonymous";
            img.src = _this.ctxPic;
            var canvas = document.getElementById("myCanvas");
            _this.ctx = canvas.getContext("2d");
            img.onload = () => {
              _this.ctx.drawImage(img, 0, 0, 660, 260);
              //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
              if (canvas.getContext) {
                _this.ctx = canvas.getContext("2d");
                _this.ctx.fillStyle = "#BF001E";
                _this.ctx.fillRect(obj.x, obj.y, 4, 4);
                _this.ctx.font = "12px bold 宋体";
                _this.convertCanvasToImage(canvas);
                // //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。
              }
            };
          } else if (_this.pointNum == 4) {
            this.clearCanvas();
            this.canvasImg = true;
            this.ctxPic = this.imgUrl;
            this.$forceUpdate();
            var img = new Image();
            img.crossOrigin = "Anonymous";
            img.src = _this.ctxPic;
            var canvas = document.getElementById("myCanvas");
            _this.ctx = canvas.getContext("2d");
            img.onload = () => {
              _this.ctx.drawImage(img, 0, 0, 660, 260);
              //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
              if (canvas.getContext) {
                _this.ctx = canvas.getContext("2d");
				
                _this.drawCanvas(
                  _this.pointData[0],
                  _this.pointData[1],
                  _this.pointData[2],
                  _this.pointData[3],
                  "",
                  color
                );
                _this.convertCanvasToImage(canvas);
                // //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。
              }
            };
          }
        }
      }
    },

// 清除点
clearCanvas() {
      let _this = this;
      let ctxPicCopy = this.ctxPic;
      _this.ctxPic = ctxPicCopy;
      var c = document.getElementById("myCanvas");
      var cxt = c.getContext("2d");
      this.$forceUpdate();
    },

效果图