HTML5 canvas ctx.fillText ไม่ขึ้นบรรทัดใหม่

เมธอด fillText() วาดข้อความที่เติมสีบน canvas หากคุณต้องการขึ้นบรรทัดใหม่ สามารถทำได้โดยแยกข้อความที่ขึ้นบรรทัดใหม่และเรียก fillText() หลายครั้ง ด้วยวิธีนี้ คุณกำลังแยกข้อความเป็นบรรทัดและวาดแต่ละบรรทัดแยกกัน

ลองรันโค้ดสนิปเพ็ตด้านล่าง:

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