Automattic / Automattic/node-canvas

Three-byte+ UTF-8 characters not supported?

Open
#1,169 9 comments 0 reactions 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

## Issue

My main concern is drawing Japanese text, but I've tried to analyse the problem a little using the characters I found here: https://stackoverflow.com/a/6066442/3181933

It seems that characters which take up 3 or more bytes don't print correctly.

## Working code when run in Chrome:

```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = '#007cff';
ctx.fillRect(0, 0, 200, 200);

ctx.font = '20px Impact'
ctx.fillStyle = '#ff7c00';
ctx.fillText('1-byte !', 10, 20);
ctx.fillText('2-byte ¶', 10, 40);
ctx.fillText('3-byte ‱', 10, 60);
ctx.fillText('4-byte 𝅘𝅥𝅯', 10, 80);
ctx.fillText('Japanese 日本', 10, 100);
```

## Steps to Reproduce (non-working code with node-canvas)
```js
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#007cff';
ctx.fillRect(0, 0, 200, 200);

ctx.font = '20px Impact'
ctx.fillStyle = '#ff7c00';
ctx.fillText('1-byte !', 10, 20);
ctx.fillText('2-byte ¶', 10, 40);
ctx.fillText('3-byte ‱', 10, 60);
ctx.fillText('4-byte 𝅘𝅥𝅯', 10, 80);
ctx.fillText('Japanese 日本', 10, 100);
```
You can see the results of node canvas vs chrome [here](https://i.imgur.com/aQSFgRi.png)

## Your Environment
* Version of canvas-prebuilt 2.0.0-alpha.12
* Environment v8.9.3 Win10 x64 Enterprise N

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.