HTML5 canvas ctx.fillText sẽ không ngắt dòng

Phương thức fillText () vẽ văn bản đầy trên canvas. Nếu bạn muốn ngắt dòng, bạn có thể thực hiện việc này bằng cách tách văn bản tại các dòng mới và gọi filltext () nhiều lần. Bằng cách đó, bạn đang chia văn bản thành các dòng và vẽ từng dòng riêng biệt.

Bạn có thể thử chạy đoạn mã sau -

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

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

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;
}