Automattic / Automattic/node-canvas
Undesired anti-aliasing when drawing images from a larger source image
- 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