Automattic / Automattic/node-canvas

Undesired anti-aliasing when drawing images from a larger source image

Open
#2,274 1 comment 0 reactions 0 assignees View on GitHub
Bug Needs more info
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

Been upscaling an image consisting of individual tiles, an image atlas basically. Using separate drawImage calls for each tile did not produce the desired result. All non-edge tiles had anti-aliased edges when I was expecting sharp edges. This caused undesired blending between tiles which is exactly what I was trying to avoid by drawing each tile individually.

Tried using a clipping path to solve the issue but anti-aliasing originates from the source image rather than the destination canvas.

Since there is no `createImageBitmap` to create images from a region within another image, I ended up with the following workaround:

1. Create temporary canvas for each tile.
2. Draw the tile using drawImage to this canvas.
3. Grabbing the blob URL to load each tile canvas as a separate image.
4. Drawing the now isolated tile image, scaled to the output canvas.

## Steps to Reproduce

The rhino example on MDN shows clear, sharp edges:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Doing the same with node-canvas results in faded edges.

## Your Environment
* Version of node-canvas: 2.11.0
* Environment: Node v18.17.0

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the issue with node-canvas 2.11.0 using the MDN drawImage rhino example and an image atlas made of individual tiles. Start by examining drawImage source-image sampling and the reported createImageBitmap workaround; done means drawing separate atlas tiles at scale without faded or blended edges.

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
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.