I am trying to convert an image to a canvas, and than add a text to the image and convert it back to an image, but i am having issues doing it, the text is NEVER added to the final picture.

At the end of the function I upload the image to the server but the picture uploaded doent have the text on it, just the picture.

I have tried many different ways and the result is the same, can someone tell me what am i doing wrong please?

THANKS in advance…

  async function saveConfiguration() {
    try {
      const {
        left: caseLeft,
        top: caseTop,
        width,
        height,
      } = phoneCaseRef.current!.getBoundingClientRect();
  
      const { left: containerLeft, top: containerTop } =
        containerRef.current!.getBoundingClientRect();
  
      const leftOffset = caseLeft - containerLeft;
      const topOffset = caseTop - containerTop;
  
      const actualX = renderedPosition.x - leftOffset;
      const actualY = renderedPosition.y - topOffset;
  
      //create canvas
      const canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext("2d");
  
      const userImage = new Image();
      userImage.crossOrigin = "anonymous";
      userImage.src = imageUrl;
      await new Promise((resolve) => (userImage.onload = resolve));
  
      //add image
      ctx?.drawImage(
        userImage,
        actualX,
        actualY,
        renderedDimension.width,
        renderedDimension.height
      );
  
  
      // add text
      ctx.font = `${fontSizeCustom}px Arial`;
      ctx.fillStyle = "rgba(255,255,255,.5)";
      ctx.textBaseline = "top";
      ctx.fillStyle = "red"; // 
      ctx.fillText(customText, fontPosition.x, fontPosition.y);
  
  
  
      const base64 = canvas.toDataURL();
      const base64Data = base64.split(",")[1];
  
      //function convert base64 to blob
      const blob = base64ToBlob(base64Data, "image/png");
      const file = new File([blob], "filename.png", { type: "image/png" });
  
      //upload iamge to server UPLOADTHINGS
      await startUpload([file], { configId });
    } catch (err) {
      console.log("error al subir imagen");
    }
  }
  

I tried using the function but doent work. Just want to add the text to the final image.