Yogesh Chauhan's Blog

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:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Steps to Install Microsoft SQL Server on a MacOSSQL/MySQLWhat are CSS Specificity Rules and how does browser apply them?CSSHow to create a simple digital clock using JavaScript?JavaScriptHow to add a ribbon on top of a container using CSS?CSSIN Operator in PostgreSQLPostgresHow to add Date and Time picker in HTML and get the values using JavaScript?HTMLMake sure your links have descriptive textUI/UXHow to create a Child Theme in WordPress?WordPressHow to create an empty array in Swift?SwiftDebugging in WordPress Part 2: WP_DEBUG_LOG and WP_DEBUG_DISPLAYWordPressThe SQL UNION OperatorSQL/MySQLIntroduction to Angular modules Part 3: NgModules vs JavaScript modules and Angular librariesAngular