JS

ADD TEXT TO IMAGE IN JAVASCRIPT

a (quick example)

IMAGE, CANVAS, AND TEXT

01

var i = new Image(),       t = "PIZZA!",       c = document.createElement("canvas"),       ctx = canvas.getContext("2d");

ADD TEXT TO IMAGE

02

i.onload = () => {   SOURCE IMAGE   c.width = i.naturalWidth;   c.height = i.naturalHeight;   ctx.drawImage(i, 0, 0, i.naturalWidth,    i.naturalHeight);     ADD TEXT   ctx.font = "bold 50px Arial";   ctx.fillStyle = "rgb(255, 255, 255)";   ctx.fillText(t, 0, 50); };

GO! i.src = "IMAGE.JPG";

OPTIONAL DOWNLOAD

03

CREATE <A> LINK let a = document.createElement("a"); a.href = c.toDataURL("image/webp"); a.download = "download.webp";

DOWNLOAD & REMOVE LINK a.click(); a.remove();