# Multiple Instances of an Image Rendered Using the drawImage Function

**URL:** <https://devforum.zoom.us/t/multiple-instances-of-an-image-rendered-using-the-drawimage-function/94776>\
**Category:** Zoom Apps\
**Created:** [September 11, 2023, 12:39am UTC](https://devforum.zoom.us/t/multiple-instances-of-an-image-rendered-using-the-drawimage-function/94776 "2023-09-11T00:39:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![oliver2wister](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/oliver2wister/32/49128_2.png) [@oliver2wister](https://devforum.zoom.us/u/oliver2wister)\
**Post date:** [September 11, 2023, 12:39am UTC](https://devforum.zoom.us/t/multiple-instances-of-an-image-rendered-using-the-drawimage-function/94776/1 "2023-09-11T00:39:21Z")

</div>

### Format Your New Topic as Follows:

**Zoom Apps Configuration**  
Next.js

**Description**  
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**

```auto
  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;
    },
    [canvasRefs]
  );

useEffect(()=>{
...

        try {
          const drawnImageIds: string[] = drawImageIds.current;
          const image= drawName(
            `${participantInfo[index].screenName}-${increments.current}`,
            index
          );
          if (hostnameImageUrl) {         
            const drawnImageId = await zoomSdk.drawImage({
              imageData: image,
              x,
              y,
              zIndex: 2,
            });
            increments.current = increments.current + 1;
            drawnImageIds.push(drawnImageId.imageId);
          }
          //Used to remove unnecessary images during re-rendering.
          drawImageIds.current = drawnImageIds;
        } catch (e) {
          console.error(e);
        }
    ........

},[])

```

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/f/3/f358cb2171677b58d6fba7e73db01bac216a46e3.png)

---

<div class="post-metadata">

**Author:** ![maxresolutionimaging](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxresolutionimaging/32/54158_2.png) [@maxresolutionimaging](https://devforum.zoom.us/u/maxresolutionimaging)\
**Post date:** [December 14, 2023, 4:58pm UTC](https://devforum.zoom.us/t/multiple-instances-of-an-image-rendered-using-the-drawimage-function/94776/2 "2023-12-14T16:58:48Z")

</div>

> [@oliver2wister](#):
>
> **Zoom Apps Configuration**  
> Next.js
> 
> **Description**  
> 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`.

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](https://richmondmedclinic.com/) or [Medical Imaging Katy TX](https://maxresolutionimaging.com/)