Center the image within the frame without stuttering – HTML5 Canvas

I have the above code consisting of image and declarative json. Please help me fix the code so that the displayed images are not jerky and it is centered.

const data = {
  scaleX: 133,
  scaleY: 133,
  res: {
      "101": { "w": 704, "h": 354, "x": 0, "y": 0 },
      "102": { "w": 652, "h": 358, "x": 705, "y": 0 },
      "103": { "w": 652, "h": 361, "x": 1358, "y": 0 },
      "104": { "w": 704, "h": 351, "x": 0, "y": 362 },
      "105": { "w": 652, "h": 358, "x": 705, "y": 362 },
      "106": { "w": 652, "h": 339, "x": 1358, "y": 362 },
      "107": { "w": 671, "h": 351, "x": 0, "y": 721 },
      "108": { "w": 671, "h": 354, "x": 672, "y": 721 },
      "109": { "w": 636, "h": 386, "x": 1344, "y": 721 },
      "110": { "w": 671, "h": 355, "x": 0, "y": 1108 },
      "111": { "w": 671, "h": 343, "x": 672, "y": 1108 },
      "112": { "w": 636, "h": 358, "x": 1344, "y": 1108 }
  },
  frames: [
      { "x": -352, "y": -403, "res": 104 },
      { "x": -337, "y": -403, "res": 108 },
      { "x": -327, "y": -403, "res": 102 },
      { "x": -318, "y": -402, "res": 112 },
      { "x": -327, "y": -402, "res": 105 },
      { "x": -337, "y": -399, "res": 110 },
      { "x": -352, "y": -399, "res": 101 },
      { "x": -337, "y": -396, "res": 107 },
      { "x": -327, "y": -409, "res": 103 },
      { "x": -318, "y": -437, "res": 109 },
      { "x": -327, "y": -398, "res": 106 },
      { "x": -337, "y": -400, "res": 111 }
  ],
  frameRate: 12
};

// Canvas setup
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = new Image();
image.src = "http://171.244.52.145/ver/0/res/wingui/wing226.png"; // Your uploaded image path

// Set canvas dimensions
const frameWidth = 700; // Max frame width
const frameHeight = 500; // Max frame height
canvas.width = frameWidth;
canvas.height = frameHeight;

// Animation variables
let currentFrame = 0;
const totalFrames = data.frames.length;
const frameInterval = 1000 / data.frameRate; // Time per frame in ms
let lastFrameTime = 0;

// Draw a frame
function drawFrame(timestamp) {
  if (!lastFrameTime) lastFrameTime = timestamp;
  const elapsedTime = timestamp - lastFrameTime;

  if (elapsedTime > frameInterval) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      const frameData = data.frames[currentFrame];
      const { x: destX, y: destY, res } = frameData;
      const { x: srcX, y: srcY, w: srcW, h: srcH } = data.res[res];

      const offsetX = (canvas.width - srcW) / 2;
      const offsetY = (canvas.height - srcH) / 2;

      const centerX = canvas.width - destX / 2;
      const centerY = canvas.height - destY / 2;
      const radio = Math.PI + Math.round(centerX, centerY) + Math.ceil(hi)

      ctx.drawImage(
          image,
          srcX, srcY,
          srcW, srcH,
          offsetX, offsetY,
          srcW, srcH
      );

      currentFrame = (currentFrame + 1) % totalFrames;
      lastFrameTime = timestamp;
  }

  requestAnimationFrame(drawFrame);
}

image.onload = () => {
  requestAnimationFrame(drawFrame);
};

You can copy the following code to try it out.

I was able to crop the images into frames after centering the parameters in the json. Everything is fine but the frames are jerky. It is necessary to use the x,y parameters in the “frame”. But it’s a negative number, I don’t know how to use it