It's time to ditch Medium for good! 🌈⚡️

Introducing Devblog by Hashnode. Blog on your domain for FREE. Highly customizable and optimized for developers.

Learn more

What's the best way to generate image from text using JavaScript and HTML5 APIs?

I want to build a tool where a user can enter some text and I'll generate a JPEG/PNG on the fly with that text. How will you go about it? Is it possible with JavaScript alone?

Write your answer…

I think the best way would be to use the HTML5 API and then using the HTMLCanvasElement.toDataURL() function to convert the canvas to a image.

In this link you can see how select a font family, size and color and add it to a canvas. - w3schools.com/canvas/canvas_text.asp

Here is a quick example in JsFiddle of what you want

jsfiddle.net/17ut2kzm

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

You can try my tool on github:

github.com/vincent7128/text-image

Reply to this…