word-wrap-canvas

Word wrap

Installation

npm install word-wrap-canvas

Usage

1. Import word-wrap-canvas.

For ES Modules:

import { wordWrap } from "word-wrap-canvas";

For CommonJS:

const { wordWrap } = require("word-wrap-canvas");

2. Example of use.

Import

import { wordWrap } from "word-wrap-canvas";

Example config

// Default config
const text =
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
const maxWidth = 200;
const fontSize = 14;
const fontFamily = "Roboto";
const lineHeight = fontSize * 1.2; // Line spacing (1.2 of font size)

Using the wordWrap

const lineList = wordWrap({
  text,
  maxWidth,
  fontConfig: { fontSize, fontFamily },
  isAdaptiveWidth: false // option
});

without canvas

<div>
  {lineList.map((line, index) => (
      <span key={index}>{line}</span>
    ))}
</div>

for canvas

const setCanvasTextStyle = (ctx: CanvasRenderingContext2D) => {
  ctx.fillStyle = "#000";
  ctx.font = `normal ${fontSize}px ${fontFamily}`;
  ctx.textBaseline = "top"; // Align top
};

const setCanvasSettings = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => {
  // Calculate canvas height based on number of lines
  canvas.height = lineList.length * lineHeight;
  setCanvasTextStyle(ctx);
};

const ctx = canvas.getContext("2d");
if (!ctx) return;
setCanvasSettings(canvas, ctx);
// Draw each line of text
lineList.forEach((line, index) => {
  const yPosition = index * lineHeight;
  ctx.fillText(line, 0, yPosition);
});

<canvas id="canvas" width={maxWidth} />

API

wordWrap({ text, maxWidth, fontConfig })

• text : string - Text for word wrapping ex: "Hello world"
• maxWidth : number - Maximum line width in pixels ex: 400
• fontConfig : TWordWrapCanvasFontConfig - Font configuration for text width calculation.
• isAdaptiveWidth : boolean - Responsive Width Flag. Default: false

fontConfig

• fontFamily : string - Font Family ex: "Roboto"
• fontSize : number - Font size ex: 16

Return

• string[]

Canvas word wrap hash (left before, right after wordWrap)

Canvas word wrap in simple text (left before, right after wordWrap)

Word wrap in any text (left before, right after wordWrap)

License

MIT