Automattic / Automattic/node-canvas

Font rendering problem

Open
#1,275 5 comments 1 reaction 0 assignees View on GitHub
Text & Fonts
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

Hi I don't use node-canvas directly, but fabric.js instead. This framework uses node-canvas. I posted a problem in their github repo: https://github.com/fabricjs/fabric.js/issues/5296.

Basically the problem is related to the different way a font is rendered in the frontend and backend.
This is the image I have in my browser (OSX, Chrome).

![screenshot 2018-10-05 at 13 07 43](https://user-images.githubusercontent.com/2089578/46744730-a97bd280-cca3-11e8-809d-a12d4a005f52.png)

Black and purple text layers are touching the vertical lines. This is the image once it is rendered with node canvas (Docker, linux image).

![d33311c0-c892-11e8-ae1c-972848442e62 3](https://user-images.githubusercontent.com/2089578/46744898-f52e7c00-cca3-11e8-9aa6-221a3d811279.jpg)

As you can see, purple text doesn't touch lines. Black text's right edge doesn't touch either. I have been told that this is due to the way that text is measured in node-canvas. Is there any solution or anything I can do to improve this behaviour?

Thanks.

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.