How can I add text on an Image using html5 canvas?

Question

I want to add text on an image using HTML5. How can this be done?

Answer 1

You can load the image into a canvas (using drawImage()), then draw text on the canvas (using fillText()).

If you want to you can then take the image data from the canvas using toDataUrl() and post that data to the server for image persistence.

If you only need it for client side visibility you have a much simpler solution that doesn't use html5. just overlay a text over the image using absolute positioning.