Automattic / Automattic/node-canvas
`measureText` differs significantly from browser implementations
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 1.2k
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 1
Description
Even though node-canvas now supports font registering and more precise font rendering, I noticed `measureText` still returns "significantly" different result comparing to some of the popular browser implementations.
For example, rendering "Awesome!" string in "30px Arial" gives me this width:
- node-canvas 1.1.0: **137**
- FF 18, 26: **139.5**
- IE9, IE10, IE11: **140**
- Opera 12: **141**
- Chrome 31, WebKit, Opera 15: **141**
All browsers differ by <=1.5px while node-canvas is 2.5-4px away.
Is there a way to move this somehow closer to other browsers range? In this particular case, anything from 139 to 141 would already be better. 140-141 would be ideal.
Simple example used for testing:
``` js
var Canvas = require('canvas')
, canvas = new Canvas(300, 300)
, ctx = canvas.getContext('2d')
, Font = Canvas.Font;
var font = new Font('Arial', __dirname + '/Arial.ttf');
ctx.addFont(font);
ctx.font = '30px Arial';
ctx.fillText("hello world", 0, 50);
console.log(ctx.measureText('Awesome!').width);
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.