¿Cómo puedo agregar texto en una imagen usando el lienzo HTML5?

Question

Quiero agregar texto en una imagen usando HTML5. ¿Cómo se puede hacer esto?

Answer 1

Puede cargar la imagen en un lienzo (usando drawImage()), luego dibuja texto en el lienzo (usando fillText()).

Si lo desea, puede tomar los datos de la imagen del lienzo usando toDataUrl() y publique esos datos en el servidor para la persistencia de la imagen.

Si solo lo necesita para la visibilidad del lado del cliente, tiene una solución mucho más simple que no usa HTML5. Simplemente superponga un texto sobre la imagen usando el posicionamiento absoluto.