Node Js Canvas Draw Image using Text and image Tutorial

Last Updated on by in Node JS

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.

Node Js Canvas Draw Image using Text and image Tutorial

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.