Advertisement
Guest User

Untitled

a guest
Sep 17th, 2014
189
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. HTML5 canvas ctx.fillText won't do line breaks?
  2. ctxPaint.fillText("s  ome n \n <br/> thing", x, y);
  3.    
  4. function drawMultilineText(){
  5.  
  6.    // set context and formatting  
  7.    var context = document.getElementById("canvas").getContext('2d');
  8.    context.font = fontStyleStr;
  9.    context.textAlign = "center";
  10.    context.textBaseline = "top";
  11.    context.fillStyle = "#000000";
  12.  
  13.    // prepare textarea value to be drawn as multiline text.
  14.    var textval = document.getElementByID("textarea").value;
  15.    var textvalArr = toMultiLine(textval);
  16.    var linespacing = 25;
  17.    var startX = 0;
  18.    var startY = 0;
  19.  
  20.    // draw each line on canvas.
  21.    for(var i = 0; i < textvalArr.length; i++){
  22.        context.fillText(textvalArr[i], x, y);
  23.        y += linespacing;
  24.    }
  25. }
  26.  
  27. // Creates an array where the <br/> tag splits the values.
  28. function toMultiLine(text){
  29.   var textArr = new Array();
  30.   text = text.replace(/nr?/g, '<br/>');
  31.   textArr = text.split("<br/>");
  32.   return textArr;
  33. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement