<html> <meta charset="UTF-8"> <body> <canvas id="myCanvas" width="400" height="200" /> </body> <script> CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
var lines = text.split("\n");
for (var i = 0; i < lines.length; i++) {
var words = lines[i].split(' '); var line = '';
for (var n = 0; n < words.length; n++) { var testLine = line + words[n] + ' '; var metrics = this.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { this.fillText(line, x, y); line = words[n] + ' '; y += lineHeight; } else { line = testLine; } }
this.fillText(line, x, y); y += lineHeight; } };
var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d");
// Line at 180px width to see demonstrate maximum line length. (20x + 160 width) ctx.strokeStyle = "red"; ctx.moveTo (180.5,0); ctx.lineTo (180.5,200); ctx.stroke();