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
$ 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 { 
  drawText,
  specToJson,
  splitText,
  splitWords,
  textToWords,
  wordsToJson,
  getTextHeight,
  getWordHeight,
  getTextStyle,
  getTextFormat 
}  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',

  // stroke color
  strokeColor: 'black',

  // stroke width
  strokeWidth: 0,
  
  // justify text or not
  justify: false,

  // If the text or word should be underlined.
  // Can also be an object with customization options like color, thickness, and offset.
  underline: false,

  // If the text or word should have a strikethrough. 
  // Can also be an object with customization options like color, thickness, and offset.
  strikethrough: false,

  // infer whitespace in the text
  inferWhitespace: true,

  // allows overflow
  overflow: true,

  // debug mode
  debug:  false,

});

Changelog:

v3.0.1 (12/09/2025)

• Fixed a bug where specifying any allowed property of TextFormat.underline or TextFormat.strikethrough as undefined was not resulting in the default behavior. undefined is treated as equivalent to the absence of the property.

v3.0.0 (12/07/2025)

• The RenderSpec.textBaseline property type has changed from CanvasTextBaseline to RenderTextBaseline which is a narrowing of possible baselines used for actual rendering.
• Added new TextFormat.underline and TextFormat.strikethrough options

v2.0.0 (03/18/2025)

• Breaking: Updated minimum supported of Node to >=22 and builds now target ES2022 at minimum.

v1.2.1 (03/18/2025)

• Added warning in TypeScript/JSDoc for the exported getTextHeight() function about it not supporting multi-line text.

v1.2.0 (01/16/2025)

• New strokeColor and strokeWidth text formatting options to control the outline of the text

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

The post Render Plain/Rich Text On HTML Canvas – text-to-canvas appeared first on CSS Script.