CanvasTextWrapper.js

JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with optional alignments and padding.

Syntax:


new CanvasTextWrapper(HTMLCanvasElement, String [, Options]);


OPTIONS
- is a JavaScript object with the following available properties and values:

Defaults & Usage:


The default options object which values will be used if a property is not specified or no object is passed:

{ font: "18px Arial, sans-serif",
   textAlign: "left",
   verticalAlign: "top",
   paddingX: 0,
   paddingY: 0,
   fitParent: false,
   lineBreak: "auto" }


Use standard canvas text drawing methods such as "fillStyle" and "globalCompositeOperation" when needed before using CanvasTextWrapper like so:

var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 250;
context = canvas.getContext("2d");
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(0, 0, canvas.width, canvas.height);

context.globalCompositeOperation = "destination-out";
var wrapper = new CanvasTextWrapper(canvas, 'Hello'); // default options will apply

Examples: