what I am trying to achieve is to have a component which is not visible to the user at any point, then turn it into an image and then get it to the user's clipboard. This is what I have right now.

  const generateImage = () => {
    const component = document.getElementById("component");
    if (component) {
      toBlob(component)
        .then(function (blob: any) {
          const textBlob: any = new Blob(["I am a string"], {
            type: "text/plain",
          });

          navigator.clipboard
            .write([
              new ClipboardItem({
                "image/png": blob,
                "text/plain": textBlob,
              }),
            ])
            .catch((e) => console.log(e));
        })
        .catch((err) => console.log(err));
    }
  };

It works fine when the component is in my sight (even though the image came out kind of shifted to the right? but this probably has to do with my styling), but when I tried something like

position: absolute;
left: -1000%;

It would leave me with an empty clipboard.

I have stumbled upon something like an OffscreenCanvas but I have no idea how to use it properly and maybe there is a cleaner solution to my problem.