Right-aligned text with leading/trailing spaces rendered incorrectly

[kangax]

Using a simple test like this:

ctx.font = '30px Arial';
ctx.textAlign = 'right';
ctx.strokeRect(100, 100, 100, 100);
ctx.fillText('   foobar', 100, 100);

... I'm getting incorrect rendering in latest node-canvas:

compare to the same output in Chrome (and FF):

There's a similar problem with trailing spaces.

node-canvas:

Chrome (FF):

[konkissner]

same for i-text elements with textAlign: center.

this is the canvas rendered in chrome:

this one is generated with node-canvas:

Any ideas or workarounds?

[Joesmi]

Hello, has anything happened on this front? Thanks for letting us know.

[StephanBijzitter]

+1 We also need a fix for this. @LinusU

[duydodevgithub]

Version

2.3.6

Steps to reproduce

We seem to have same problem with text position after saving to PNG. Attached is the design and the final PNG. Here is my environment information:

• Node 8.11.6
• Fabric: 2.3.6
• Node-canvas: 1.6.11

@asturur Any thoughts about this issue? Thank you so much !

[asturur]

when i have time to update to node-canvas 2, i ll swarm over those old fabricjs bugs.

Now we are on 1.6 and that is unsupported. This means that we can't really invest time in research and fixes.

[akinnee]

I'm running into an issue like this. Using canvas in the browser my text is centered. Running the same text rendering code but using node-canvas results in seemingly random text alignment.

browser canvas:

node-canvas:

And here's my function for rendering my lines of text:

function renderLines({ canvasContext, lines, x, y }) {
  const lineHeight = canvasContext.measureText('M').width * 1.2;
  const startY = y - (lines.length - 1) * lineHeight / 2;
  lines.forEach((line, index) => {
    const lineY = startY + index * lineHeight;
    canvasContext.fillText(line.trim(), x, lineY);
  });
}

I'm using node-canvas 2.3.1.

[andreafalzetti]

Same issue here. Node.js tex-align is off compared to the browser. Anyone found a solution?

[asturur]

I think we have some text align test in node and they work. What kind of font are you using? If you have a simple index.js that can print the text not correctly aligned, that woulds help. Maybe with a vertical line for reference where the alignemnt should be

[aman-webdev]

I am facing an issue with top alignment, on browser its okay but on node its adding extra space at the top , happening with all fonts

browser

node

Some extra space is coming at the top in node