YogeshChauhan . com

How to Draw a Text Image using JavaScript?

in JavaScript on September 18, 2020

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:

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

How to change the Login Logo in WordPress?WordPressEXISTS and NOT EXISTS in PostgresPostgresHigher Order Functions in JavaScript with ExamplesJavaScriptComponents and Props in ReactReactSocial Media Colors: Sass VariablesMiscA Step by Step Guide to Make RSS in XML For Any Website or Blog For FreeMiscSimple Page Hit Counter in PHPPHPDISTINCT ON: The confusing, unique and useful feature in PostgresPostgresHow to import a CSS file using PHP code and not HTML code?PHPQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQLHow to add multiple Columns in CSS like Bootstrap?CSSHow to get recent posts in WordPress?WordPress