Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- HTML5 canvas ctx.fillText won't do line breaks?
- ctxPaint.fillText("s ome n \n <br/> thing", x, y);
- 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 < textvalArr.length; i++){
- context.fillText(textvalArr[i], x, y);
- y += linespacing;
- }
- }
- // Creates an array where the <br/> tag splits the values.
- function toMultiLine(text){
- var textArr = new Array();
- text = text.replace(/nr?/g, '<br/>');
- textArr = text.split("<br/>");
- return textArr;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement