Render Plain/Rich Text On HTML Canvas – text-to-canvas

Category: Javascript , Text | May 20, 2024
Views Total:12 views
Official Page:Go to website
Last Update:May 20, 2024


Render Plain/Rich Text On HTML Canvas – text-to-canvas


text-to-canvas is a JavaScript library that takes plain text or rich text and renders it onto an HTML5 canvas element, complete with automatic line wrapping.

This library goes beyond basic text rendering. It lets you control things like alignment, justification, and even measure text height for precise layout.

It can be useful for creating custom graphics, interactive reports, dynamic presentations, or personalized advertisements directly within the browser, without the need for external image editing software.

How to use it:

1. Install the text-to-canvas package.

# Yarn
$ yarn add text-to-canvas
$ npm install text-to-canvas

2. Import the following modules as per your needs:

  • drawText(): Render your text onto an HTML Canvas.
  • specToJson(): Convert a RenderSpec to a JSON string.
  • splitText(): Split a string into wrapped lines.
  • splitWords(): Split a Text array into wrapped lines.
  • textToWords(): Convert a string into an array.
  • wordsToJson(): Convert an array into a JSON string.
  • getTextHeight(): Get the height of the text.
  • getWordHeight(): Gets the height of the word.
  • getTextStyle(): Get styles of the text.
  • getTextFormat(): Get a full TextFormat object.
import { 
}  from 'text-to-canvas';

3. Create an HTML canvas element on the page.

<canvas id="example" width="600" height="400"></canvas>

4. Define the text to be rendered

// plain text
const text = 'CSSScript.Com';
// With formatting options
const text = [
  { text: 'CSS', format: { fontWeight: 'bold'} },
  { text: 'Script', format: { fontStyle: 'italic' } },
  { text: '.Com' },

5. Render the text on the canvas.

const canvas = document.getElementById('example');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 600, 400);
// Render
drawText(ctx, text, {
  // Required!
  // width/height of the textbox
  width: 300,
  height: 300,
  // ... more options here

6. More options to customize the rendered text.

drawText(ctx, text, {
  // x/y position of the text
  x: 0 ,
  y: 0,
  // 'left', 'right', 'center'
  align: 'center',
  // vertical align:
  // 'top', 'bottom', 'middle'
  vAlign: 'middle',
  // font family
  font: 'Arial',
  // font size
  fontSize: 14,
  // font syle
  fontStyle: '',
  // font variant
  fontVariant: '',
  // font weight
  fontWeight: '400',
  // font color
  fontColor: 'black',
  // justify text or not
  justify: false,
  // infer whitespace in the text
  inferWhitespace: true,
  // allows overflow
  overflow: true,
  // debug mode
  debug:  false,


v1.1.2 (05/20/2024)

  • Fixed bug where drawText() config fontColor option was not being included in the base font format used to render the text

You Might Be Interested In:

Leave a Reply