Preformatted Text on Canvas Element

Question

I am having problems reflecting the new line and multiple spaces entered by a user in a text area onto a canvas element. I cannot seem to find a away to convert the text to preformatted.

Essentially the way my site works is that I have a text box where the user enters text within an text area. This text is then passed to the canvas element.

I have provided a sample of my code. Essentially when the user types within the text area it is passed to a function called inputtextgo1. Input text 1 takes the text from the text area and reproduces the text onto the canvas element (Section1 canvas).

HTML:

        <canvas id="Section1Canvas" width="500" height="95" >Your browser does not support the HTML5 canvas tag.</canvas>
    <textarea class="bags"  id="bag1areatext" onkeyup="inputtextgo1()" name="Text">Sample Text</textarea> <br/>

Javascript:

var canvas = document.getElementById('Section1Canvas'),
context = canvas.getContext('2d');

section1backgroundimage.onload = function(){
    context.drawImage(section1backgroundimage, 0, 0);
    context.fillText("Sample Text",250,50);
    }

section1backgroundimage.src = 'images/Selection/Bag/Section1/LightBlue.jpg';

context.font="34px " + selfonttype;
context.textAlign="center";
context.fillStyle = seltextcolor;


    function inputtextgo1() {
    var y = document.getElementById("bag1areatext").value;
    context.clearRect(0, 0, 500, 95)
    context.font="34px " + selfonttype;
    context.fillStyle = seltextcolor;
    context.fillText(y,250,50);

}

selfontype is the font selected by the user, section1backgroundimage is an image file that is used for the background of the canvas and seltextcolor is the font colour selected by the user.

I would like the canvas element that I have created to reflect the new lines and spaces entered by the user in the text area. Also I would like the text to be wrapped (if the text touches the edge of the canvas to go onto the next line).

This is just a snippet of the code that I use to update the function. If you need additional code to help with the problem just let me know.

Thank you very much for your help.

Answer 1

If you also want to take care of new lines and so on, you must convert them manualy.

Canvas won't natively accept them. I've updated the code of MarkE to manage them:

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    //manage carriage return
    text = text.replace(/(\r\n|\n\r|\r|\n)/g, "\n");
    //manage tabulation
    text = text.replace(/(\t)/g, "    "); // I use 4 spaces for tabulation, but you can use anything you want
    //array of lines
    var sections = text.split("\n"); 

     for (s = 0, len = sections.length; s < len; s++) {
          var words = sections[s].split(' ');
          var line = '';

          for (var n = 0; n < words.length; n++) {
              var testLine = line + words[n] + ' ';
              var metrics = context.measureText(testLine);
              var testWidth = metrics.width;
              if (testWidth > maxWidth) {
                  context.fillText(line, x, y);
                  line = words[n] + ' ';
                  y += lineHeight;
              } else {
                  line = testLine;
              }
          }
          context.fillText(line, x, y);

         //new line for new section of the text
         y += lineHeight;
      }
}

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var maxWidth = 350;
      var lineHeight = 25;
      var x = (canvas.width - maxWidth) / 2;
      var y = 60;
      var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. \nLorem Ipsum has been the industry's standard dummy text ever since the 1500s.";

      context.font = '14pt Verdana';
      context.fillStyle = '#000';

      wrapText(context, text, x, y, maxWidth, lineHeight); 

I've updated the fiddle : http://jsfiddle.net/PFBXM/4/

Answer 2

Here is how to draw wrapping text on a canvas.

The important point of the code is to use context.measureText() to test whether each new word will extend beyond the right border of the canvas.

You can set maxWidth to your canvas width if you want to draw right up to the borders.

Here is the code and a Fiddle: http://jsfiddle.net/m1erickson/PFBXM/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      function wrapText(context, text, x, y, maxWidth, lineHeight) {
        var words = text.split(' ');
        var line = '';

        for(var n = 0; n < words.length; n++) {
          var testLine = line + words[n] + ' ';
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if(testWidth > maxWidth) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
          }
          else {
            line = testLine;
          }
        }
        context.fillText(line, x, y);
      }

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var maxWidth = 400;
      var lineHeight = 25;
      var x = (canvas.width - maxWidth) / 2;
      var y = 60;
      var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";

      context.font = '14pt Verdana';
      context.fillStyle = '#000';

      wrapText(context, text, x, y, maxWidth, lineHeight);
    </script>
  </body>
</html>