Automattic / node-canvas

Node canvas is a Cairo backed Canvas implementation for NodeJS.
10.09k stars 1.16k forks source link

Error disabling text font antialias #2411

Open System25 opened 1 month ago

System25 commented 1 month ago

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

But, when I try to create the same thing with NodeJS-canvas, I get the following image: image

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

Steps to Reproduce

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

System25 commented 1 month ago

Hi, I manage to print the text right. You need ctx.textDrawingMode = 'glyph' and disabling the antialias at font level by following: https://wiki.archlinux.org/title/Font_configuration/Examples/No_anti-aliasing

Anyways, it would be really cool if you could disable the antialias by programming.

Thank you very much!