Automattic / Automattic/node-canvas

fillText: \n (and \r\n) splits the text in different lines

Open
#1,363 1 comment 0 reactions 0 assignees View on GitHub
Bug Help wanted
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

## Issue

In browsers, newlines (and carriage return, new line) do not split the rendered text into two lines but render as a space instead, however in `canvas`, this is not true and splits them. A web developer who has been working with web browsers's canvas would not expect `fillText` to have multi-line support.

Using the code:

```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.font = '50px serif';
ctx.textAlign = 'center';
ctx.fillText('Hello world\ntext', 200, 90);
```

Gets us the same result in Chrome 71.0.3578.98, Edge 44.17763.1.0, and Firefox 64.0.2:
![image](https://user-images.githubusercontent.com/24852502/51780968-73a81000-2113-11e9-9495-c119bc4a5cbb.png)

But `canvas` (with the adjustments made to use `createCanvas()`) does multi-line instead:
![image](https://user-images.githubusercontent.com/24852502/51781046-46a82d00-2114-11e9-853b-5dcd86e667c1.png)

The lack of this consistency may confuse some developers (like me) when trying the code in back-end before deploying to front-end, or vice-versa, I am not sure if this was intended or not, as this is not mentioned in any of the non-standard features or variations from the browser canvas.

## Steps to Reproduce

```js
const Canvas = require('canvas');

// Create canvas
const canvas = Canvas.createCanvas(400, 150);
const ctx = canvas.getContext('2d');
ctx.font = '50px serif';
ctx.textAlign = 'center';
ctx.fillText('Hello world\ntext', 200, 90);

// write file using `canvas.toBuffer()`
```

## Your Environment
* Version of node-canvas: 2.2.0
* Environment: Node.js 10.13.0 on Debian 9

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.