HTML5 कैनवास ctx.fillText लाइन ब्रेक नहीं करेगा

fillText() विधि कैनवास पर भरे हुए टेक्स्ट को खींचती है। यदि आप लाइनों को तोड़ना चाहते हैं तो आप टेक्स्ट को नई लाइनों में विभाजित करके और 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>

// सीएसएस

canvas {
   background-color: #FFCE9E;
}