"HTML5 canvas ctx.fillText cannot achieve line wrapping"

The fillText() method draws filled text on the canvas. If you want to wrap the text, you can do this by splitting the text at a new line and calling filltext() multiple times. By doing this, you split the text into multiple lines and draw each line separately.

You can try running the following code snippet −

var c = $('#c')[0].getContext('2d');
c.font = '12px Courier';
alert(c);

var str = 'first line second line...';
var a = 30;
var b = 30;
var lineheight = 15;
var lines = str.split('');

for (var j = 0; j<lines.length; j++)
c.fillText(lines[j], a, b + (j*lineheight) );

// for canvas
<canvas id="c" width="200" height="200"></canvas>

// CSS

canvas {
   background-color: #FFCE9E;
}

The above is the detailed content of "HTML5 canvas ctx.fillText cannot achieve line wrapping". For more information, please follow other related articles on the PHP Chinese website!