How do I dynamically insert images into mask and generate new jpg in JavaScript

I want to be able to iterate through a database of users and, for each of their profile images, insert them into a predefined mask, and generate a new image. Basically, the mask will be a an image with some boilerplate text in it already, and there will be a hallow white square in the center where I will insert the user's profile image the server returns from the db, which will become a new jpg I can store.

How would I go about doing this? I have no idea where to begin. I imagine canvas could work but I am not sure.