Automattic / Automattic/node-canvas

Issue rendering "Noto Color Emoji" font. On macOS

Open
#2,493 0 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

# Bug: Emoji Rendering Falls Back to System Apple Emoji Font

## Description
The emoji rendering code is not correctly using the Noto Color Emoji font and instead falls back to the system Apple emoji font. This causes inconsistent rendering across platforms and doesn't match our design requirements.

## Current Implementation

```typescript
// Font registration
const fontPath = path.resolve(__dirname, "./fonts/NotoColorEmoji-Regular.ttf");
registerFont(fontPath, {
family: "NotoColorEmoji",
weight: "regular",
style: "normal",
});

// Emoji rendering
function renderEmoji(emoji: string, size = 224) {
const canvas = createCanvas(size, size);
const ctx = canvas.getContext("2d");

// @ts-ignore
ctx.textDrawingMode = "glyph";
ctx.clearRect(0, 0, size, size);

const fontSize = Math.floor(size * 0.6);
ctx.font = `${fontSize}px "NotoColorEmoji"`;

const verticalPadding = size * 0.2;
ctx.fillText(emoji, size * 0.125, size / 2 + verticalPadding * 1.125);

return canvas;
}

// Save emoji as image
function saveEmojiImage(emoji: string, outputPath: string, size = 224) {
const canvas = renderEmoji(emoji, size);
const buffer = canvas.toBuffer("image/png");
fs.writeFileSync(outputPath, buffer);
}
```

## Issue
Despite registering the Noto Color Emoji font, the rendered emojis are still using the system Apple emoji font. This happens on macOS systems and causes inconsistency with our design requirements.

## Steps to Reproduce
1. Run the emoji rendering code on a macOS system
2. Compare the output images with the expected Noto Color Emoji appearance
3. Notice that the rendered emojis match Apple's emoji style instead of Google's Noto style

## Tasks
- Fix the font loading to properly use Noto Color Emoji font
- Ensure the font doesn't fall back to system fonts

## Dependencies
- node-canvas
- Noto Color Emoji font
- https://fonts.google.com/noto/specimen/Noto+Color+Emoji?query=emoji

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the shown font registration and renderEmoji entry points, then reproduce the generated PNG on macOS and compare it with the expected Noto Color Emoji appearance. The issue names no repository file or test, so locate the relevant node-canvas rendering path before changing font loading. Done means the output consistently uses Noto Color Emoji without falling back to Apple’s system font.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.