How do you add text dynamically to an image and export it? Apologize for crossposting, but I posted this in Stack Overflow and thought it might be a better post here.

Recently, Spotify released their 2019 Spotify wrapped web application, which is essentially a way for both music artists and music listeners to rewind and review what they listened to/who listened to their music in the past year.

As part of their site, they dynamically created these images that people could either export or share to one of their social media networks.



Above is an example of one of those dynamically generated images (of course, the image, and the text/statistics below change).

How would I go about doing this in code? 

Sorry if this is in the wrong place - just wasn't sure where I would post this. Thanks in advance!
To do this in a web app is trivial. Judging by the image, even the built-in HTML canvas should be able to do everything that you need.

Once you have obtained your image and text, to give you a vague idea of the ammount of code involved, drawing them with the canvas API looks roughly as follows:

ctx.drawImage(img, x, y, width, height);
ctx.font = '12px serif';
ctx.fillText(txt, x, y);


Saving the image is equally simple:

canvas.toDataURL("image/png")


It's actually the obtaining and sharing of images are the scary parts. Spotify surely have all the images on their cloud and similarly that is where they export them to before sharing to social media. There are so many sollutions that without more detail this is probably something you'll need to find yourself.

If you just need a tutorial on html canvas, mozzilla usually have great interactive tutorials.