How to Draw a Text Image using JavaScript?

We can create a text image using HTML canvas.

Step 1

Build a canvas to hold the image pixel info.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;

Step 2

Then we need to select a context for the canvas. We can add 2d for two dimensional.

var ctx = canvas.getContext('2d');

Step 3

Finally, we can add text properties to draw the final text image.

ctx.font = '10px Cursive';
ctx.fillText("HTML Canvas!", 0, 30);

Step 4

Now, all we need to do is to add the newly created image to the body.

document.body.appendChild(canvas);

This is how it will look like:

Tweet about it