Ca\nvas.js

Without plugin

With plugin

Live test

ctx.drawBreakingText('Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n\nLorem Ipsum has been the industry\'s standard dummy text ever since the 1500s');

Enter text in the textarea to see how the plugin works

Usage

It is as simple as replacing your classic fillText or strokeText with drawBreakingText !

Arguments

CanvasRenderingContext2D.prototype.drawBreakingText(str, x, y, w, lh, type)

str : a string, text to be drawn

x : a number, x coord of the upper left text

y : a number, y coord of the upper left text

w : a number, maximum width of the text

lh : a number, line height (1 is the text size)

type : either 'fill' or 'stroke', method of text filling

It is more tolerant: it defaults undefined arguments. Heck, you can even write ctx.drawBreakingText() without encountering an error!

Code

Simply paste this the beginning of your JavaScript code and you are good to go!

(function (window, document) {
	// str (string) is a string, containing drawn text, default 'Hello World'
	// x (x coordinate) is a number, x coord of the upper left text, default 0
	// y (y coordinate) is a number, y coord of the upper left text, default font size
	// w (width) is a number, sets the maximum with of a line, default canvas width
	// lh (line height) is a number, sets the distance between the lines (1 is 1x the font size), default 1
	// method is a string, 'fill' or 'stroke' drawing method on the canvas, default 'fill'

	CanvasRenderingContext2D.prototype.drawBreakingText = function (str, x, y, w, lh, method) {
		// local variables and defaults
		var textSize = parseInt(this.font.replace(/\D/gi, ''));
		var textParts = [];
		var textPartsNo = 0;
		var words = [];
		var currLine = '';
		var testLine = '';
		str = str || 'Hello World';
		x = x || 0;
		y = y || textSize;
		w = w || this.canvas.clientWidth;
		lh = lh || 1;
		method = method || 'fill';


		// manual linebreaks
		textParts = str.split('\n');
		textPartsNo = textParts.length;


		// split the words of the parts
		for (var i = 0; i < textParts.length; i++) {
			words[i] = textParts[i].split(' ');
		}


		// now that we have extracted the words
		// we reset the textParts
		textParts = [];


		// calculate recommended line breaks
		// split between the words
		for (var i = 0; i < textPartsNo; i++) {

			// clear the testline for the next manually broken line
			currLine = '';

			for (var j = 0; j < words[i].length; j++) {
				testLine = currLine + words[i][j] + ' ';

				// check if the testLine is of good width
				if (this.measureText(testLine).width > w && j > 0) {
					textParts.push(currLine);
					currLine = words[i][j] + ' ';
				} else {
					currLine = testLine;
				}
			}
			textParts.push(currLine);
		}


		// render the text on the canvas
		for (var i = 0; i < textParts.length; i++) {
			if (method === 'fill') {
				this.fillText(textParts[i], x, y+(textSize*lh*i));
			} else if (method === 'stroke') {
				this.strokeText(textParts[i], x, y+(textSize*lh*i));
			} else {
				return 'ERROR: ' + method + ' text drawing method does not exist';
			}
		}

		return true;
	};
}) (window, document);