Automattic / Automattic/node-canvas

Error disabling text font antialias

Open
#2,411 2 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
The text font antialias is not properly disabled.

When I run:
`convert -size 320x100 xc:white -font Arial -pointsize 12 \
+antialias -annotate +28.5+68.5 'Lorem ipsum' font_tile.png`

I get the following image:
![font_tile](https://github.com/user-attachments/assets/2ac88b7c-4dfc-410f-a125-eddacf5833e5)

But, when I try to create the same thing with NodeJS-canvas, I get the following image:
![image](https://github.com/user-attachments/assets/2ab3d5bd-9a7c-44f8-abd0-b111aef9de7b)

I believe that you need to set the text antialias to none at font level with "cairo_font_options_set_antialias":
https://github.com/ImageMagick/ImageMagick/blob/42c30be7ef6a5d272d2a21dedce23f5023cb5723/coders/pango.c#L233

I also tried disabling the antialias at font level by following: https://wiki.archlinux.org/title/Font_configuration/Examples/No_anti-aliasing but that is also not good:
![no_antialias](https://github.com/user-attachments/assets/5e9c0a03-9b4e-450c-b8ca-a5bb9ab1e8e4)

## Steps to Reproduce
```js
import { createCanvas } from 'canvas';
import * as fs from 'fs';

const canvas = createCanvas(320, 100);
const ctx = canvas.getContext('2d');

ctx.antialias = 'none';
ctx.imageSmoothingEnabled = false;

ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, 320, 100);

ctx.fillStyle = '#000000';
ctx.strokeStyle = '#000000';
ctx.font = '12px Arial';

ctx.fillText('Lorem ipsum', 28.5, 68.5);
const buffer = canvas.toBuffer("image/png");
fs.writeFileSync("./image.png", buffer);

```

## Your Environment
* Version of node-canvas 2.11.2
* Environment Ubuntu 22.04.4 LTS

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.