xiaokangwang/jsbin.hoqay.css

## jsbin.hoqay.css
#myCanvas {
    border: 1px solid black;
}

## jsbin.hoqay.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>

## jsbin.hoqay.js
var canvas = $('#myCanvas')[0];
canvas.width = '300';
canvas.height = '600';
var ctx = canvas.getContext('2d');
ctx.font = '14px Helvetica';
ctx.fillStyle = 'black';
ctx.textAlign = 'start';
ctx.textBaseline = 'top';

var cutOff = 210,
    DEBUG = true;

var multiFillText = function (text, x, y, lineHeight, fitWidth) {
    var draw = x !== null && y !== null;

    text = text.replace(/(\r\n|\n\r|\r|\n)/g, "\n");
    sections = text.split("\n");

    var i, str, wordWidth, words, currentLine = 0,
        maxHeight = 0,
        maxWidth = 0;

    var printNextLine = function (str) {
        if (draw) {
            ctx.fillText(str, x, y + (lineHeight * currentLine));
        }

        currentLine++;
        wordWidth = ctx.measureText(str).width;
        if (wordWidth > maxWidth) {
            maxWidth = wordWidth;
        }
    };

    for (i = 0; i < sections.length; i++) {
        words = sections[i].split(' ');
        index = 1;

        while (words.length > 0 && index <= words.length) {

            str = words.slice(0, index).join(' ');
            wordWidth = ctx.measureText(str).width;

            if (wordWidth > fitWidth) {
                if (index === 1) {
                    // Falls to this case if the first word in words[] is bigger than fitWidth
                    // so we print this word on its own line; index = 2 because slice is
                    str = words.slice(0, 1).join(' ');
                    words = words.splice(1);
                } else {
                    str = words.slice(0, index - 1).join(' ');
                    words = words.splice(index - 1);
                }

                printNextLine(str);

                index = 1;
            } else {
                index++;
            }
        }

        // The left over words on the last line
        if (index > 0) {
            printNextLine(words.join(' '));
        }


    }

    maxHeight = lineHeight * (currentLine);

    if (DEBUG) {
        ctx.strokeRect(x, y, maxWidth, maxHeight);
    }

    if (!draw) {
        return {
            height: maxHeight,
            width: maxWidth
        };
    }
}

var multiMeasureText = function (text, lineHeight, fitWidth) {
    return multiFillText(text, null, null, lineHeight, fitWidth);
};

multiFillText("Many San Franciscans blahblahblahblahblaasdfasdfasdfhblhblaha never travel here, located as it is at the southern edge of the Mission valley, served by only a few city bus lines and perched atop a steep hill, to boot", 0, 0, 15, cutOff);
//multiFillText('blahblahblahblahblahblhblaha sdf ads fa dsf ad', 0, 150, 15, cutOff);
multiFillText('Right AV Valve - Mitral (Bicuspid) Valve', 0, 150, 15, cutOff);
multiFillText('right common carotid arteries', 0, 190, 15, cutOff);
multiFillText("Expressionism can be used to describe various art forms but, in its broadest sense, it is used to describe any art that raises subjective feelings above objective observations. The paintings aim to reflect the artist's state of mind rather than the reality of the external world. The German \nExpressionist movement began in 1905 with artists such as Kirchner and Nolde, who favored the Fauvist style of bright colors but also added stronger linear effects and harsher outlines.", 0, 210, 15, cutOff);

multiFillText('right common\ncarotid arteries', 0, 500, 15, cutOff);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<canvas id="myCanvas"></canvas>
	</body>
	</html>
	var canvas = $('#myCanvas')[0];
	canvas.width = '300';
	canvas.height = '600';
	var ctx = canvas.getContext('2d');
	ctx.font = '14px Helvetica';
	ctx.fillStyle = 'black';
	ctx.textAlign = 'start';
	ctx.textBaseline = 'top';

	var cutOff = 210,
	DEBUG = true;

	var multiFillText = function (text, x, y, lineHeight, fitWidth) {
	var draw = x !== null && y !== null;

	text = text.replace(/(\r\n\|\n\r\|\r\|\n)/g, "\n");
	sections = text.split("\n");

	var i, str, wordWidth, words, currentLine = 0,
	maxHeight = 0,
	maxWidth = 0;

	var printNextLine = function (str) {
	if (draw) {
	ctx.fillText(str, x, y + (lineHeight * currentLine));
	}

	currentLine++;
	wordWidth = ctx.measureText(str).width;
	if (wordWidth > maxWidth) {
	maxWidth = wordWidth;
	}
	};

	for (i = 0; i < sections.length; i++) {
	words = sections[i].split(' ');
	index = 1;

	while (words.length > 0 && index <= words.length) {

	str = words.slice(0, index).join(' ');
	wordWidth = ctx.measureText(str).width;

	if (wordWidth > fitWidth) {
	if (index === 1) {
	// Falls to this case if the first word in words[] is bigger than fitWidth
	// so we print this word on its own line; index = 2 because slice is
	str = words.slice(0, 1).join(' ');
	words = words.splice(1);
	} else {
	str = words.slice(0, index - 1).join(' ');
	words = words.splice(index - 1);
	}

	printNextLine(str);

	index = 1;
	} else {
	index++;
	}
	}

	// The left over words on the last line
	if (index > 0) {
	printNextLine(words.join(' '));
	}


	}

	maxHeight = lineHeight * (currentLine);

	if (DEBUG) {
	ctx.strokeRect(x, y, maxWidth, maxHeight);
	}

	if (!draw) {
	return {
	height: maxHeight,
	width: maxWidth
	};
	}
	}

	var multiMeasureText = function (text, lineHeight, fitWidth) {
	return multiFillText(text, null, null, lineHeight, fitWidth);
	};

	multiFillText("Many San Franciscans blahblahblahblahblaasdfasdfasdfhblhblaha never travel here, located as it is at the southern edge of the Mission valley, served by only a few city bus lines and perched atop a steep hill, to boot", 0, 0, 15, cutOff);
	//multiFillText('blahblahblahblahblahblhblaha sdf ads fa dsf ad', 0, 150, 15, cutOff);
	multiFillText('Right AV Valve - Mitral (Bicuspid) Valve', 0, 150, 15, cutOff);
	multiFillText('right common carotid arteries', 0, 190, 15, cutOff);
	multiFillText("Expressionism can be used to describe various art forms but, in its broadest sense, it is used to describe any art that raises subjective feelings above objective observations. The paintings aim to reflect the artist's state of mind rather than the reality of the external world. The German \nExpressionist movement began in 1905 with artists such as Kirchner and Nolde, who favored the Fauvist style of bright colors but also added stronger linear effects and harsher outlines.", 0, 210, 15, cutOff);

	multiFillText('right common\ncarotid arteries', 0, 500, 15, cutOff);