0

i am making a html5 text splash in which i require the text to be in multiple line. For eg

Everything
Awesome
Is Really
Not awesome

But is coming in one line such that

Everything Awesome Is Really Not awesome

i am unable to create a line break . for different words.Can anyone help me with this.

I have created a demo to show what is goin on http://cssdeck.com/labs/owxlsevi/0. Can anyone please suggest me how to get each word in different line like i specified above.

Param Veer
  • 776
  • 4
  • 13
  • 27
  • possible duplicate of [HTML5 canvas ctx.fillText won't do line breaks?](http://stackoverflow.com/questions/5026961/html5-canvas-ctx-filltext-wont-do-line-breaks) – Philipp Dec 17 '12 at 12:20

1 Answers1

0

Unfortunately, the fillText and strokeText methods of the canvas 2d context do not support line-breaks. When you want multi-line text, you have to do this yourself by splitting the text into substrings and output them separately with different y-offsets.

This is a function which draws a text with line breaks (\n) in multiple lines separated by a fixed line height of 12 pixels:

function fillMultilineText(context, text, x, y) {
    // split text at line-breaks and put the resulting sub-strings into an array
    var lines = text.split('\n');
    // draw each line with 12pixel offset
    for(var i = 0; i < lines.length; i++) {
         var line_y = y + i * 12;
         context.fillText(lines[i], x, line_y);
    }
}

Here is a related question with some solutions: HTML5 canvas ctx.fillText won't do line breaks?

Community
  • 1
  • 1
Philipp
  • 67,764
  • 9
  • 118
  • 153
  • yes i have read this by doing some find on stack. But i am really not able to find a solution to split the text and output them can you help me out with some example – Param Veer Dec 17 '12 at 12:20
  • @ParamVeer I added an example to my answer – Philipp Dec 17 '12 at 12:38