Automattic / Automattic/node-canvas

`measureText` differs significantly from browser implementations

Open
#331 15 comments 3 reactions 0 assignees View on GitHub
Bug Text & Fonts
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.