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
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);
}
........
},[])
