I am trying to write a package that can create some animations using setInterval. However, I need to make the animations run synchronously. Why do hor and vert become undefined and why do hiter and viter not update inside setInterval?

  animateStretchPromise(hor, vert, speed) {
    return new Promise((resolve, reject) => {
      let context = this.context;
      let cvs = this.canvas;
      let radius = this.radius
      let hiter = 1
      let viter = 1
      let cen = this.center
      let lw = this.lineWidth;
      let ac = this.arcColor;
      let hinc = (hor / 1000) * (speed / 100)
      let vinc = (vert / 1000) * (speed / 100)
      const interval = setInterval(function () {
        console.log(hiter, hor, viter, vert)
        context.beginPath()
        context.clearRect(0, 0, cvs.width, cvs.height)
        context.save();
        context.translate(cvs.width * cen.x, cvs.height * cen.y);
        context.scale(hiter, viter);
        context.translate(cvs.width * cen.x * -1, cvs.height * cen.y * -1);
        context.arc(cvs.width * cen.x, cvs.height * cen.y, radius, 0, circum, true);
        context.closePath();
        context.lineWidth = lw;
        context.strokeStyle = ac;
        context.stroke();
        context.restore();
        if (hiter >= hor && viter >= vert) {
          console.log(hiter, hor, viter, vert)
          clearInterval(interval)
          resolve("Animation Complete")
        }
        if (hiter < hor) {
          if (hiter < 1) {
            hiter -= hinc
          } else {
            hiter += hinc
          }
        } 
        if (viter < vert) {
          if (viter < 1) {
            viter -= vinc
          } else {
            viter += vinc
          }
        }
      }, 1);
    })
  }