Automattic / Automattic/node-canvas
Issue rendering "Noto Color Emoji" font. On macOS
- 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