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


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?