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.


This is how it will look like:


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 add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Safe Practice to add Links to cross-origin destinationUI/UXHow to send and receive query strings via links in Angular 9?Angular6 Different Functions to Sort Arrays in PHPPHPWhat is React? Learn the basicsReactWordPress: How to query all posts from custom post type and display them in a list?WordPressHow to Use the EXISTS and NOT EXISTS Operator with a Subquery in SQL and MySQL?SQL/MySQLHow to Validate User Name, Email Address and URL in PHP?PHPCREATE TABLE Examples in PostgreSQLPostgresRIGHT JOIN in PostgresPostgresHow to get category name using post id in WordPress?WordPressLEFT JOIN in PostgresPostgresWordPress: How to loop through a repeater field in ACF?WordPress