Node Js Draw Image from Text with Canvas Module Tutorial

Every time you create some content, you need a new banner or image to explain your topic. What if there is a way to create a banner in node using text.

Yes, you heard it right; we can automate this work and get rid of the process of designing a banner.

Today, in this step by step tutorial, we will teach you how to convert text to banner in the Node js application using the Canvas package.

A node can be a divine soul if you are a true seeker. In node, you can build almost everything you want. Thanks to the package manager mechanism that allows you to make things simpler.

The node-canvas is a powerful module, and It is a Cairo-backed Canvas implementation for Node.js. It requires minimum configuration to form new images through text. We will see how to use the simple methods to generate as many images or banners as you want.

In this guide, we will use the Canvas module to create an image from text; let’s start implementing.

How to Create Image from Text using Canvas Library in Node

  • Step 1: Generate Project Directory
  • Step 2: Init Package File
  • Step 3: Create Server File
  • Step 4: Add Canvas Module
  • Step 5: Generate Image using Text
  • Step 6: Create Canvas Image and Store in Directory

Generate Project Directory

We would like to take pragmatic approach and assist you how things start from absolute bottom.

Let us start with generating a folder for this node guide.

mkdir node-demo

Your folder is created, next get into the the project directory.

cd node-demo

Init Package File

You must have a package file in node-based apps since we will be using a third-party package to build the small feature.

It is necessary for us to keep the essential metadata of our project in the centralized file; we call it package.json.

This file keep the scripts, libraries and their respective version numbers in one place.

npm init

Enter the details that is identical to your node project.

Create Server File

We need a central file, where we will craft the logic to convert text to the image.

In your node directory, create a new file, name it server.js.

Make sure to head over to the package.json file, under the scripts section just right after the node attribute change the existing file name to server.js file name.

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

When you execute the command from the terminal, our file will be generated; therefore, we need a locus where we can put this file.

For that you have to create a banner/ folder inside your node project.

Add Canvas Module

Next, onto your terminal type, the following command also execute the command to install the canvas module.

npm install canvas

Generate Image using Text

The first thing first, add the createCanvas, and loadImage modules.

Define the dimensions for the banner that you want to generate from the text.

The load image method will draw the image, and the fs.writeFileSync() method will add the text canvas image into the banner folder.

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

const width = 1200
const height = 650

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

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

context.font = 'bold 75pt Menlo'
context.textBaseline = 'top'
context.textAlign = 'center'
context.fillStyle = '#b98001'

const text = 'You Matter'

const textWidth = context.measureText(text).width
context.fillRect(590 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)
context.fillStyle = '#fff'
context.fillText(text, 600, 180)

context.fillStyle = '#ffffff'
context.font = 'bold 35pt Menlo'
context.fillText('remotestack.com', 700, 555)

loadImage('./images/lion.png').then((img) => {
  context.drawImage(img, 340, 515, 70, 70)
  let fileBuffer = canvas.toBuffer('image/png')
  fs.writeFileSync('./banner/textToBanner.png', fileBuffer)
})

Create Canvas Image and Store in Directory

Time has come to check out how does the text conversion work in node app.

Make sure you are on to the console and typed the given command.

After the command is added on terminal screen make sure to hit enter.

node server.js

Now, visit the banner folder; you can see the newly generated file from text in this folder. That contains the logo, text and site URL.

Node Js Draw Image from Text with Canvas Module Tutorial

Summary

Creating an image from the text in Node is made simpler by the canvas module. We have simplified using the Canvas module in the Node js application.

In this node canvas example; We have figured out how facile it could be to draw an image from the text in the Node application is.

We threw light on the various methods for converting text to an image. Canvas library offers customization on the fly and lets you beautify your canvas image so easily and comfortably.