I'm currently working with canvas, i move an object from left to right perfectly through this easing function :

export const easeInQuad = (t, b, c, d) => {
  return c * (t /= d) * t + b;
};

I pass as parameter the following : elapsedTime (ms), beginningValue (px), totalChange (beginning - ending in px), totalDuration (ms)

It works perfectly in the two side EXCEPT when the side changes, it makes a double dash.

Do I mess something ?

Here is where we found the function : https://riptutorial.com/html5-canvas/example/18488/easing-using-robert-penners-equations

Here is the full animation function :

requestAnimationFrame(animate);

function animate(time) {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  ctx.beginPath();

  for (let [playerKey, player] of Object.entries(room.players)) {
    beginningValue = cache[playerKey].x * areaX;
    endingValue = room.players[playerKey].x * areaX;
    totalChange = endingValue - beginningValue;

    let height = 0;
    if (playerKey === "p" + (local.playerID + 1)) {
      height = canvasHeight - paddleHeight;
      ctx.fillStyle = "#56dbd4";
    } else {
      ctx.fillStyle = "#d86ef0";
    }
    if (!startTime) {
      startTime = time;
    }
    let elapsedTime = Math.min(time - startTime, totalDuration);
    let easedX;
    console.log(beginningValue + " --- to --- " + endingValue);
    if (endingValue > beginningValue) {
      easedX = easeInQuad(
        elapsedTime,
        beginningValue,
        totalChange,
        totalDuration
      );
    } else if (endingValue < beginningValue) {
      easedX = easeInQuad(
        elapsedTime,
        endingValue,
        totalChange,
        totalDuration
      );
    } else {
      easedX = endingValue;
    }
    if (easedX > endingValue) {
      easedX = endingValue;
    }
    ctx.rect(easedX - paddleWidth / 2, height, paddleWidth, paddleHeight);
    ctx.fill();
    if (time < startTime + totalDuration) {
      requestAnimationFrame(animate);
    }
  }
}