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   n   I mean  the line breaks do not show work   ctxPaint fillText  s  ome  n   n  lt br  gt  thing   x  y     The above code will draw  s  ome  n  lt br  gt  thing   on one line    Is this a limitation of fillText or am I doing it wrong  the   n s are there  and aren t printed  but they don t work either

User · Answer

My ES5 solution for the problem   var wrap text    ctx  text  x  y  lineHeight  maxWidth  textAlign    gt      if  textAlign  textAlign    center    ctx textAlign   textAlign   var words   text split        var lines        var sliceFrom   0   for var i   0  i  lt  words length  i          var chunk   words slice sliceFrom  i  join          var last   i     words length - 1     var bigger   ctx measureText chunk  width  gt  maxWidth     if bigger          lines push words slice sliceFrom  i  join             sliceFrom   i           if last          lines push words slice sliceFrom  words length  join             sliceFrom   i             var offsetY   0   var offsetX   0   if textAlign      center   offsetX   maxWidth   2   for var i   0  i  lt  lines length  i          ctx fillText lines i   x   offsetX  y   offsetY      offsetY   offsetY   lineHeight         More information on the issue is on my blog

User · Answer

Here s a version of Colin s wrapText   that also supports vertically centered text with context textBaseline    middle    var wrapText   function  context  text  x  y  maxWidth  lineHeight        var paragraphs   text split   n        var textLines               Loop through paragraphs     for  var p   0  p  lt  paragraphs length  p              var line               var words   paragraphs p  split                  Loop through words         for  var w   0  w  lt  words length  w                  var testLine   line   words w                     var metrics   context measureText testLine               var testWidth   metrics width                 Make a line break if line is too long             if  testWidth  gt  maxWidth                    textLines push line trim                     line   words w                                   else                   line   testLine                                  textLines push line trim                   Move text up if centered vertically     if  context textBaseline      middle           y   y -   textLines length-1    lineHeight    2          Render text on canvas     for  var tl   0  tl  lt  textLines length  tl              context fillText textLines tl   x  y           y    lineHeight

User · Answer

The code for word-wrapping  breaking at spaces  provided by  Gaby Petrioli is very helpful  I ve extended his code to provide support for newline characters  n  Also  often times it s useful to have the dimensions of the bounding box  so multiMeasureText   returns both the width and the height   You can see the code here  http   jsfiddle net jeffchan WHgaY 76

User · Answer

If you only need two lines of text  you can split them into two different fillText calls and give each one a different baseline   ctx textBaseline  bottom   ctx fillText  First line   x-position  y-position   ctx textBaseline  top   ctx fillText  Second line   x-position  y-position

User · Answer

Here is my function to draw multiple lines of text center in canvas  only break the line  don t break-word   x000D   x000D  var c   document getElementById  myCanvas    var ctx   c getContext  2d     let text    Hello World  n Hello World 2222  n AAAAA  n thisisaveryveryveryveryveryverylongword    ctx font    20px Arial    fillTextCenter ctx  text  0  0  c width  c height   function fillTextCenter ctx  text  x  y  width  height        ctx textBaseline    middle       ctx textAlign    center        const lines   text match     r n   g       for let i   0  i  lt  lines length  i              let xL    width - x    2         let yL    y    height    lines length   1      i 1           ctx fillText lines i   xL  yL          x000D   lt canvas id  myCanvas  width  300  height  150  style  border 1px solid  000   gt  lt  canvas gt  x000D   x000D   x000D   If you want to fit text size to canvas  you can also check here

User · Answer

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    x000D   x000D  var c   document getElementById  c   getContext  2d    x000D  c font    11px Courier   x000D      console log c   x000D  var txt    line 1 nline 2 nthird line     x000D  var x   30  x000D  var y   30  x000D  var lineheight   15  x000D  var lines   txt split   n    x000D   x000D  for  var i   0  i lt lines length  i    x000D      c fillText lines i   x  y    i lineheight     x000D  canvas background-color  ccc   x000D   lt canvas id  c  width  150  height  150  gt  lt  canvas gt  x000D   x000D   x000D      I just made a wrapping proof of concept  absolute wrap at specified width  No handling words breaking  yet  example at http   jsfiddle net BaG4J 2    x000D   x000D  var c   document getElementById  c   getContext  2d    x000D  c font    11px Courier   x000D   x000D  var txt    this is a very long text to print   x000D   x000D  printAt c  txt  10  20  15  90    x000D   x000D   x000D  function printAt  context   text  x  y  lineHeight  fitWidth  x000D    x000D      fitWidth   fitWidth    0  x000D       x000D      if  fitWidth  lt   0  x000D        x000D           context fillText  text  x  y    x000D          return  x000D        x000D       x000D      for  var idx   1  idx  lt   text length  idx    x000D        x000D          var str   text substr 0  idx   x000D          console log str  context measureText str  width  fitWidth   x000D          if  context measureText str  width  gt  fitWidth  x000D            x000D              context fillText  text substr 0  idx-1   x  y    x000D              printAt context  text substr idx-1   x  y   lineHeight  lineHeight   fitWidth   x000D              return  x000D            x000D        x000D      context fillText  text  x  y    x000D    x000D  canvas background-color  ccc   x000D   lt canvas id  c  width  150  height  150  gt  lt  canvas gt  x000D   x000D   x000D      And a word-wrapping  breaking at spaces  proof of concept  example at http   jsfiddle net BaG4J 5    x000D   x000D  var c   document getElementById  c   getContext  2d    x000D  c font    11px Courier   x000D   x000D  var txt    this is a very long text  Some more to print    x000D   x000D  printAtWordWrap c  txt  10  20  15  90    x000D   x000D   x000D  function printAtWordWrap  context   text  x  y  lineHeight  fitWidth  x000D    x000D      fitWidth   fitWidth    0  x000D       x000D      if  fitWidth  lt   0  x000D        x000D          context fillText  text  x  y    x000D          return  x000D        x000D      var words   text split       x000D      var currentLine   0  x000D      var idx   1  x000D      while  words length  gt  0  amp  amp  idx  lt   words length  x000D        x000D          var str   words slice 0 idx  join       x000D          var w   context measureText str  width  x000D          if   w  gt  fitWidth   x000D            x000D              if  idx  1  x000D                x000D                  idx 2  x000D                x000D              context fillText  words slice 0 idx-1  join       x  y    lineHeight currentLine     x000D              currentLine    x000D              words   words splice idx-1   x000D              idx   1  x000D            x000D          else x000D           idx     x000D        x000D      if   idx  gt  0  x000D          context fillText  words join       x  y    lineHeight currentLine     x000D    x000D  canvas background-color  ccc   x000D   lt canvas id  c  width  150  height  150  gt  lt  canvas gt  x000D   x000D   x000D      In the second and third examples i am using the measureText   method which shows how long  in pixels  a string will be when printed

User · Answer

Here s my solution  modifying the popular wrapText   function that is already presented here  I m using the prototyping feature of JavaScript so that you can call the function from the canvas context   CanvasRenderingContext2D prototype wrapText   function  text  x  y  maxWidth  lineHeight         var lines   text split   n         for  var i   0  i  lt  lines length  i               var words   lines i  split               var line                for  var n   0  n  lt  words length  n                  var testLine   line   words n                     var metrics   this measureText testLine               var testWidth   metrics width              if  testWidth  gt  maxWidth  amp  amp  n  gt  0                    this fillText line  x  y                   line   words n                         y    lineHeight                            else                   line   testLine                                   this fillText line  x  y           y    lineHeight            Basic usage   var myCanvas   document getElementById  myCanvas    var ctx   myCanvas getContext  2d    ctx fillStyle    black   ctx font    12px sans-serif   ctx textBaseline    top   ctx wrapText  Hello nWorld   20 20 160 16     Here s a demonstration I put together  http   jsfiddle net 7RdbL

User · Answer

I happened across this due to having the same problem   I m working with variable font size  so this takes that into account   var texts    this  find   noteContent   html    split   lt br gt     for  var k in texts        ctx fillText texts k   left   top   parseInt ctx font  2  k         where  noteContent is the contenteditable div the user edited  this is nested in a jQuery each function   and ctx font is  14px Arial   notice that the pixel size comes first

User · Answer

I just extended the CanvasRenderingContext2D adding two functions  mlFillText and mlStrokeText   You can find the last version in GitHub    With this functions you can fill   stroke miltiline text in a box  You can align the text verticaly and horizontaly   It  takes in account  n s and can also justify the text    The prototypes are    function mlFillText text x y w h vAlign hAlign lineheight   function mlStrokeText text x y w h vAlign hAlign lineheight    Where vAlign can be   top    center  or  button  And hAlign can be   left    center    right  or  justify   You can test the lib here  http   jsfiddle net 4WRZj 1     Here is the code of the library      Library  mltext js    Desciption  Extends the CanvasRenderingContext2D that adds two functions  mlFillText and mlStrokeText        The prototypes are         function mlFillText text x y w h vAlign hAlign lineheight      function mlStrokeText text x y w h vAlign hAlign lineheight          Where vAlign can be   top    center  or  button     And hAlign can be   left    center    right  or  justify     Author  Jordi Baylina   baylina at uniclau com     License  GPL    Date  2013-02-21  function mlFunction text  x  y  w  h  hAlign  vAlign  lineheight  fn        text   text replace    n  g     n         text   text replace   r g           var words   text split              var sp   this measureText      width      var lines           var actualline   0      var actualsize   0      var wo      lines actualline            lines actualline  Words           i   0      while  i  lt  words length            var word   words i           if  word      n                 lines actualline  EndParagraph   true              actualline                actualsize   0              lines actualline                    lines actualline  Words                   i              else               wo                   wo l   this measureText word  width              if  actualsize     0                    while  wo l  gt  w                        word   word slice 0  word length - 1                       wo l   this measureText word  width                                    if  word         return     I can t fill a single character                 wo word   word                  lines actualline  Words push wo                   actualsize   wo l                  if  word    words i                         words i    words i  slice word length  words i  length                     else                       i                                    else                   if  actualsize   sp   wo l  gt  w                        lines actualline  EndParagraph   false                      actualline                        actualsize   0                      lines actualline                            lines actualline  Words                         else                       wo word   word                      lines actualline  Words push wo                       actualsize    sp   wo l                      i                                                        if  actualsize     0  lines actualline  pop        lines actualline  EndParagraph   true       var totalH   lineheight   lines length      while  totalH  gt  h            lines pop            totalH   lineheight   lines length             var yy      if  vAlign     bottom             yy   y   h - totalH   lineheight        else if  vAlign     center             yy   y   h   2 - totalH   2   lineheight        else           yy   y   lineheight             var oldTextAlign   this textAlign      this textAlign    left        for  var li in lines            var totallen   0          var xx  usp          for  wo in lines li  Words  totallen    lines li  Words wo  l          if  hAlign     center                 usp   sp              xx   x   w   2 -  totallen   sp    lines li  Words length - 1     2            else if   hAlign     justify    amp  amp    lines li  EndParagraph                 xx   x              usp    w - totallen     lines li  Words length - 1             else if  hAlign     right                 xx   x   w -  totallen   sp    lines li  Words length - 1                usp   sp            else      left             xx   x              usp   sp                    for  wo in lines li  Words                if  fn     fillText                     this fillText lines li  Words wo  word  xx  yy                 else if  fn     strokeText                     this strokeText lines li  Words wo  word  xx  yy                             xx    lines li  Words wo  l   usp                    yy    lineheight            this textAlign   oldTextAlign      function mlInit         CanvasRenderingContext2D prototype mlFunction   mlFunction       CanvasRenderingContext2D prototype mlFillText   function  text  x  y  w  h  vAlign  hAlign  lineheight            this mlFunction text  x  y  w  h  hAlign  vAlign  lineheight   fillText                CanvasRenderingContext2D prototype mlStrokeText   function  text  x  y  w  h  vAlign  hAlign  lineheight            this mlFunction text  x  y  w  h  hAlign  vAlign  lineheight   strokeText                   And here is the use example   var c   document getElementById  myCanvas    var ctx   c getContext  2d     var T    This is a very long line line with a CR at the end  n This is the second line  nAnd this is the last line    var lh   12   ctx lineWidth   1   ctx mlFillText T  10  10  100  100   top    left   lh   ctx strokeRect 10  10  100  100    ctx mlFillText T  110  10  100  100   top    center   lh   ctx strokeRect 110  10  100  100    ctx mlFillText T  210  10  100  100   top    right   lh   ctx strokeRect 210  10  100  100    ctx mlFillText T  310  10  100  100   top    justify   lh   ctx strokeRect 310  10  100  100    ctx mlFillText T  10  110  100  100   center    left   lh   ctx strokeRect 10  110  100  100    ctx mlFillText T  110  110  100  100   center    center   lh   ctx strokeRect 110  110  100  100    ctx mlFillText T  210  110  100  100   center    right   lh   ctx strokeRect 210  110  100  100    ctx mlFillText T  310  110  100  100   center    justify   lh   ctx strokeRect 310  110  100  100    ctx mlFillText T  10  210  100  100   bottom    left   lh   ctx strokeRect 10  210  100  100    ctx mlFillText T  110  210  100  100   bottom    center   lh   ctx strokeRect 110  210  100  100    ctx mlFillText T  210  210  100  100   bottom    right   lh   ctx strokeRect 210  210  100  100    ctx mlFillText T  310  210  100  100   bottom    justify   lh   ctx strokeRect 310  210  100  100    ctx mlStrokeText  Yo can also use mlStrokeText    0   310   420  30   center    center   lh

User · Answer

I think you can still rely on CSS  ctx measureText   height doesn   t exist    Luckily  through CSS hack-ardry   seeTypographic Metrics for more ways to fix older implementations of  using CSS measurements   we can find the height of the text through measuring the offsetHeight of a  with the same font-properties   var d   document createElement    span      d font      20px arial    d textContent      Hello world     var emHeight   d offsetHeight    from  http   www html5rocks com en tutorials canvas texteffects

User · Answer

Split the text into lines  and draw each separately   function fillTextMultiLine ctx  text  x  y      var lineHeight   ctx measureText  M   width   1 2    var lines   text split   n      for  var i   0  i  lt  lines length    i        ctx fillText lines i   x  y       y    lineHeight

User · Answer

This question isn t thinking in terms of how canvas works  If you want a line break just simply adjust the coordinates of your next ctx fillText   ctx fillText  line1   w x y z  ctx fillText  line2   w x y z 20

User · Answer

I created a tiny library for this scenario here  Canvas-Txt  It renders text in multi-line and it offers decent alignment modes     In order to use this  you will need to either install it or use a CDN   Installation  npm install canvas-txt --save   JavaScript  import canvasTxt from  canvas-txt   var c   document getElementById  myCanvas   var ctx   c getContext  2d    var txt    Lorem ipsum dolor sit amet   canvasTxt fontSize   24  canvasTxt drawText ctx  txt  100  200  200  200    This will render text in an invisible box with position dimensions of     x  100  y  200  height  200  width  200       Example Fiddle   x000D   x000D     https   github com geongeorge Canvas-Txt     x000D   x000D  const canvasTxt   window canvasTxt default  x000D  const ctx   document getElementById  myCanvas   getContext  2d    x000D   x000D  const txt    Lorem ipsum dolor sit amet   x000D  const bounds     width  240  height  80    x000D   x000D  let origin     x  ctx canvas width   2  y  ctx canvas height   2     x000D  let offset     x  origin x -  bounds width   2   y  origin y -  bounds height   2     x000D   x000D  canvasTxt fontSize   20  x000D   x000D  ctx fillStyle     C1A700   x000D  ctx fillRect offset x  offset y  bounds width  bounds height   x000D   x000D  ctx fillStyle     FFFFFF   x000D  canvasTxt drawText ctx  txt  offset x  offset y  bounds width  bounds height   x000D  body   x000D    background   111  x000D    x000D   x000D  canvas   x000D    border  1px solid  333  x000D    background   222     Could alternatively be painted on the canvas    x000D    x000D   lt script src  https   unpkg com canvas-txt 2 0 6 build index js  gt  lt  script gt  x000D   x000D   lt canvas id  myCanvas  width  300  height  160  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

Canvas element doesn t support such characters as newline   n   tab   t  or  lt  br    tag   Try it   var newrow   mheight   30  ctx fillStyle    rgb 0  0  0    ctx font    bold 24px  Verdana    ctx textAlign    center   ctx fillText  Game Over   mwidth  mheight     first line ctx fillText  play again   mwidth  newrow     second line    or perhaps multiple lines   var textArray   new Array  line2    line3    line4    line5    var rows   98  ctx fillStyle    rgb 0  0  0    ctx font    bold 24px  Verdana    ctx textAlign    center   ctx fillText  Game Over   mwidth  mheight     first line  for var i 0  i  lt  textArray length    i    rows    30  ctx fillText textArray i   mwidth  rows

User · Answer

I don t think this is possible neither  but a workaround for this is to create a  lt p gt element and position it with Javascript

User · Answer

Using javascript I developed a solution  It isn t beautiful but it worked for me     function drawMultilineText            set context and formatting        var context   document getElementById  canvas   getContext  2d        context font   fontStyleStr      context textAlign    center       context textBaseline    top       context fillStyle     000000           prepare textarea value to be drawn as multiline text      var textval   document getElementByID  textarea   value      var textvalArr   toMultiLine textval       var linespacing   25      var startX   0      var startY   0          draw each line on canvas       for var i   0  i  lt  textvalArr length  i             context fillText textvalArr i   x  y           y    linespacing              Creates an array where the  lt br  gt  tag splits the values  function toMultiLine text      var textArr   new Array       text   text replace   n r  g    lt br  gt        textArr   text split   lt br  gt        return textArr      Hope that helps

User · Answer

Maybe coming to this party a bit late  but I found the following tutorial for wrapping text on a canvas perfect    http   www html5canvastutorials com tutorials html5-canvas-wrap-text-tutorial   From that I was able to think get multi lines working  sorry Ramirez  yours didn t work for me     My complete code to wrap text in a canvas is as follows    lt script type  text javascript  gt           http    www html5canvastutorials com tutorials html5-canvas-wrap-text-tutorial       function wrapText context  text  x  y  maxWidth  lineHeight            var cars   text split   n             for  var ii   0  ii  lt  cars length  ii                   var line                   var words   cars ii  split                    for  var n   0  n  lt  words length  n                      var testLine   line   words n                         var metrics   context measureText testLine                   var testWidth   metrics width                   if  testWidth  gt  maxWidth                        context fillText line  x  y                       line   words n                             y    lineHeight                                    else                       line   testLine                                               context fillText line  x  y               y    lineHeight                         function DrawText               var canvas   document getElementById  c             var context   canvas getContext  2d              context clearRect 0  0  500  600             var maxWidth   400           var lineHeight   60           var x   20      canvas width - maxWidth    2           var y   58             var text   document getElementById  text   value toUpperCase                              context fillStyle    rgba 255  0  0  1             context fillRect 0  0  600  500             context font    51px  LeagueGothicRegular             context fillStyle     333             wrapText context  text  x  y  maxWidth  lineHeight                  document  ready function                    text   keyup function                   DrawText                                 lt  script gt    Where c is the ID of my canvas and text is the ID of my textbox   As you can probably see am using a non-standard font   You can use  font-face as long as you have used the font on some text PRIOR to manipulating the canvas - otherwise the canvas won t pick up the font   Hope this helps someone

User · Answer

I m afraid it is a limitation of Canvas  fillText  There is no multi-line support  Whats worse  there s no built-in way to measure line height  only width  making doing it yourself even harder   A lot of people have written their own multi-line support  perhaps the most notable project that has is Mozilla Skywriter   The gist of what you ll need to do is multiple fillText calls while adding the height of the text to the y value each time   measuring the width of M is what the skywriter people do to approximate text  I believe

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

Examples related to javascript

Examples related to html

Examples related to canvas

Examples related to line

Examples related to break