Html5 Canvas Ctx.Filltext Won't Do Line Breaks

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

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.)

ctx.fillText isn't doing anything

You might want to double check the return of measureText:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText#return_value

there is nothing height related there...

If we remove those textWidth & textHeight your drawSelectionRect function works.

I believe what you are trying to accomplish is to align the text, perhaps with these, you can do it:

• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline

Here is your code with those

const editCanvas = document.getElementById('c');
const ctx = editCanvas.getContext("2d");

function drawSelectionRect(
    text,
    { x, y, width, height },
    { strokeWidth, lineDash, strokeColor },
    fillColor
) {
    ctx.lineWidth = strokeWidth;
    ctx.setLineDash(lineDash);
    ctx.strokeStyle = strokeColor;

    ctx.strokeRect(x, y, width, height);
    ctx.fillStyle = fillColor;
    ctx.fillRect(x, y, width, height);

    console.log(ctx.measureText(text))
    
    ctx.fillStyle = "#000";
    ctx.font = "16px sans-serif";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    ctx.fillText(
        text,
        x + width / 2,
        y + height / 2,
        width
    );
}

drawSelectionRect(
  "ooo", 
  {x:2, y:2, width:40, height:40}, 
  {strokeWidth:3, lineDash:[0], strokeColor: "black"}, 
  "red"
)

<canvas id="c"></canvas>

New line fails to appear in strings within Canvas

There's no multi-line support for fillText() unfortunately, this is likely the cause of your issue.

In order to simulate it you'd have to use fillText() multiple times, here's a JSfiddle showing an example.

http://jsfiddle.net/BaG4J/1/

Canvas - lineTo (x, y) not generating more that one line

The problem is that you have these two lines inside the for loop:

c.beginPath();
c.moveTo(300, 200);

Which is starting a new path from the same starting point on each iteration, instead of continuing with the previous one.

To fix it, move that out of the for, just before it.

Also, I would advise you to move these other two lines after it:

c.strokeStyle = 'red';
c.stroke();

Creating a path with with multiple points/lines and drawing all of them at once is more efficient than calling stroke for each of them.

All together, it will look like this:

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
c.beginPath();c.moveTo(300, 200);
for (var i = 0; i < 10; i++) {  var x = Math.random() * window.innerWidth;  var y = Math.random() * window.innerHeight;
  c.lineTo(x, y);}
c.strokeStyle = 'red';c.stroke();

body {  margin: 0;}
canvas {  position: fixed;  top 0;  left: 0;  width: 100%;  height: 100%;}

<canvas></canvas>

Canvas fillText() not accepting variable

RESOLVED

I had a variable declaration timing issue, getText was being applied on window load (and thus empty), not on button press (when it has a value).

---

Related Topics