Multiple Instances of an Image Rendered Using the drawImage Function

Format Your New Topic as Follows:

Zoom Apps Configuration

To display participant names at the bottom left of participants drawn using the drawParticipant function in Immersive mode, I am drawing an image created on the canvas containing the participant’s name using the drawImage function.

At this point, the same image is being displayed multiple times, as shown in the image. The numbers appended to the names are unique values created for each image. How can I address this phenomenon? I have confirmed that drawImage is only called once per rendering, and unnecessary drawings before re-rendering are cleared using clearImage.

How To Reproduce

  const drawName = useCallback(
    (name: string, index: number) => {
      const c = canvasRefs.current[index].current;
      if (c === null) return null;
      const context = c.getContext("2d");
      if (context === null) {
        return null;
      context.clearRect(0, 0, c.width, c.height);
      context.fillStyle = "rgba(0,255,255,0.8)";
      context.fillRect(0, 0, c.width, c.height);
      context.fillStyle = "black";
      context.font = "20px Arial";
      context.fillText(name, 10, c.height / 2);
      const imageDataURL = context.getImageData(0, 0, c.width, c.height);
      return imageDataURL;


        try {
          const drawnImageIds: string[] = drawImageIds.current;
          const image= drawName(
          if (hostnameImageUrl) {         
            const drawnImageId = await zoomSdk.drawImage({
              imageData: image,
              zIndex: 2,
            increments.current = increments.current + 1;
          //Used to remove unnecessary images during re-rendering.
          drawImageIds.current = drawnImageIds;
        } catch (e) {


It appears that the duplication issue in your Zoom Apps configuration with Next.js might be related to the handling of canvas elements and drawn images. Ensure proper canvas clearing, verify individual canvas references in canvasRefs, and confirm unique image data creation for each participant within the drawName function. Use logging for debugging and consider reaching out to the Zoom Apps or Next.js community for more specific assistance if needed.
for more info join us @ medical clinic Katy tx or Medical Imaging Katy TX