Animating an image on the foreground of the camera using the Zoom SDK Layers API

Zoom Apps
,
1

So far drawing sharps and images on the foreground of the camera using the layers api is working. Docs

What I am doing
Getting the image data from a canvas element that I am drawing images and shapes to.
const imageData = ctx.getImageData(0, 0, 1280, 720);

Use the zoom sdk to draw the image on the camera foreground.

const zoomData = await zoomSdk.drawImage({
          x: 0,
          y: 0,
          imageData: imageData,
          zIndex: 3,
});

Later on I clear the image data from the camera fore with.
await zoomSdk.clearImage({ imageId: imageId });

This is all working fine, however, when I want to animate the position of the image that is when the problems starts. According the zoom sdk docs if i want to move the image i have to clear and redraw. Which is what I am doing the problem is because it is asynchronous the animation is choppy and not smooth.

I am using requestAnimationFrame to do the animations if that helps.

So my question is how can I do an image animation on camera foreground using the Zoom SDK Layers API?