Node

Node Js Canvas Draw Image using Text and image Tutorial

Sometimes you have to convey a message to your users through a graphic image.

In general, you use an image for such cases. What if we tell you you can generate dynamic images in node js using text only.

In this short tutorial, we will reveal step by step how to create banner images using text and pictures in node js using an external dependency.

Creating a dynamic banner in the node is made possible with the canvas package. The canvas module allows you to draw images from text in the Node js application.

The node canvas is a Cairo backed canvas implementation for Node js; it is easy to install simply with just a single command. It makes drawing on images simple through its handy properties and methods.

In this guide, we will throw light on some tips and tricks that will help you draw images on canvas using text and images in node js.

How to Create Image from Text using Canvas Library in Node

  • Step 1: Set Up Node Project
  • Step 2: Install Canvas Package
  • Step 3: Make Node Script
  • Step 4: Draw Banner from Text
  • Step 5: Run Node Script

Set Up Node Project

In order to set up a new node project, you have to create a new folder first.

Here is the command that generates a new directory.

mkdir node-tut

Move into the folder’s root.

cd node-tut

Node project must have a package.json file in this file the project related metadata resides.

Ensure that you have executed the following command from the terminal.

npm init

Install Canvas Package

In this step, you need to execute the given command to install the canvas module.

npm install canvas

Make Node Script

To create the script in node, we need a project file. Make sure to create a app.js file.

Now, we have to register the script in the package.json file as suggested below.

...
...
  "scripts": {
    "start": "node app.js"
  },
...
...

Draw Banner from Text

Before we start writing code for drawing banner in node, make sure to create /resources banner. In this folder a generated image will be kept.

Also, make sure to keep a demo image in the node’s root, here is the path /img/samurai.jpg.

Now, open the app.js file and keep the below code into the file.

const fs = require('fs')
const { loadImage, createCanvas } = require('canvas')

const width = 1200
const height = 650

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

context.fillStyle = '#2b03a3'
context.fillRect(0, 0, width, height)

context.font = 'bold 72pt Menlo'
context.textBaseline = 'top'
context.textAlign = 'center'
context.fillStyle = '#f7ab07'

const imgText = 'Tiny Text on Canvas'

const textAlign = context.measureText(imgText).width
context.fillRect(590 - textAlign / 2 - 10, 170 - 5, textAlign + 20, 120)
context.fillStyle = '#ffffff'
context.fillText(imgText, 555, 120)

context.fillStyle = '#ffffff'
context.font = 'bold 32pt Menlo'
context.fillText('positronx.io', 755, 600)

loadImage('./img/samurai.jpg').then((data) => {
  context.drawImage(data, 340, 515, 70, 70)
  const imgBuffer = canvas.toBuffer('image/png')
  fs.writeFileSync('./resources/drawnImage.png', imgBuffer)
})

Run Node Script

On the command prompt, you have to type the following command.

npm start

After, executing the command a banner will be generated in resources folder.

Conclusion

We used the canvas module to create or draw a custom banner in the node. Through its createCanvas method, we created an instance. This method takes various properties such as width, height, and type of files.

To make the image banner, we set the dynamic text. To style the text in the node banner, we used font styling properties that we accessed through the getContext() method.

In the end, we used the loadImage module, which returns a promise response and takes the image or icon that appears on the banner and exports a drawn banner in the node.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

How to Add Active Class in Map Items in React Js

In this quick tutorial, we will show you how to quite easily add the active…

1 day ago

How to Create and Use Redux Store in React Js

In this tutorial, we will learn how to create a Redux Store in React application.…

4 days ago

How to Build Dynamic Load More Feature in React Js

This detailed guide will cover how to create the Load More button and display data…

1 week ago

How to Integrate Redux Persist to React Redux Store

In this tutorial, we will step by step learn how to configure redux persist in…

1 week ago

React Redux Save Data in Local Storage with Persist Tutorial

In this comprehensive tutorial, we will learn how to persist redux store's states in React…

2 weeks ago

React Js Tailwind CSS Add Light and Dark Mode Toggler Tutorial

In this guide, we are going to learn how to add dark mode and light…

2 weeks ago