javascript - HTML5 canvas ctx.fillText won't do line breaks?

Question

I can't seem to be able to add text to a canvas if the text includes " ". I mean, the line breaks do not show/work.

ctxPaint.fillText("s  ome 
 \n <br/> thing", x, y);

The above code will draw "s ome <br/> thing", on one line.

Is this a limitation of fillText or am I doing it wrong? the " "s are there, and aren't printed, but they don't work either.

Answer 1

If you just want to take care of the newline chars in the text you could simulate it by splitting the text at the newlines and calling multiple times the fillText()

Something like http://jsfiddle.net/BaG4J/1/

var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';
    console.log(c);
var txt = 'line 1
line 2
third line..';
var x = 30;
var y = 30;
var lineheight = 15;
var lines = txt.split('
');

for (var i = 0; i<lines.length; i++)
    c.fillText(lines[i], x, y + (i*lineheight) );

canvas{background-color:#ccc;}

<canvas id="c" width="150" height="150"></canvas>