Download canvas as image, but add additional text from DOM textarea in image

by

I have canvas element (I use Fabric.JS). On the screen below canvas there is Dom textarea.

I have download button, it works – it downloads canvas element as image.
However, I need to add text in textarea text also into this download image. It should be below canvas.

How this should be done? I do not have an idea how to implement this trick?

Code (it is typescript and used in React app, but it doesn’t matter here I guess, because if it would be pure Javascript idea would be the same – create dummy a element and trigger click)

const url = canvas.toDataURL({
      format: "png",
      width,
      height,
    });
    const a = document.createElement("a");
    a.href = url;
    a.download = "download";
    const clickHandler = () => {
      setTimeout(() => {
        URL.revokeObjectURL(url);
        a.removeEventListener("click", clickHandler);
        a.remove();
      }, 150);
    };
    a.addEventListener("click", clickHandler, false);
    a.click();

8 thoughts on “Download canvas as image, but add additional text from DOM textarea in image”

Leave a Comment