Estoy tratando de escribir un paquete que pueda crear algunas animaciones usando setInterval. Sin embargo, necesito hacer que las animaciones se ejecuten sincrónicamente. ¿Por qué hor y vert se vuelven indefinidos y por qué hiter y viter no se actualizan dentro de 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); }) }