Automattic / Automattic/node-canvas
Scaling up small 1px image creates unexpected image because of interpolation set by default patternQuality
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 1.2k
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 1
Description
## Issue
After loading a 1x1 solid png and then trying to scale it larger with `scale(100,100)`, the enlarged image has a radial pattern with some transparency instead of a solid png that I expected.
If, instead of calling `ctx.drawImage(image, 0, 0, 1, 1)`, I call `ctx.drawImage(image, 0, 0, 1, 1.0000000001)` then I get the expected output.
## Steps to Reproduce
1. Create a 1x1 colored png image (code example below uses a base64 encoded black 1px png)
2. Use loadImage to load the image
3. Scale up and draw loaded image on the canvas
4. Use toDataURL() to convert canvas into png
[Code Sandbox Demo](https://codesandbox.io/s/exciting-shirley-eilvn8)
```js
const canvas = createCanvas(100, 100);
const ctx = canvas.getContext('2d');
const black1px='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
loadImage(black1px).then((image) => {
ctx.scale(100, 100);
ctx.drawImage(image, 0, 0, 1, 1);
const imageData = canvas.toDataURL(); // see output below
});
```
Output of canvas.toDataUrl():

If I make change the height passed into drawImage from `1` to `1.0000000001`, then I get a solid 100x100 image that I expected
[Code Sandbox Demo](https://codesandbox.io/s/festive-hamilton-sw1pfh?file=/src/index.js)
```js
const canvas = createCanvas(100, 100);
const ctx = canvas.getContext('2d');
const black1px='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
loadImage(black1px).then((image) => {
ctx.scale(100, 100);
ctx.drawImage(image, 0, 0, 1, 1.0000000001);
const imageData = canvas.toDataURL(); // see output below
});
```
Output of canvas.toDataUrl():

## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): 2.9.0
* Environment (e.g. node 4.2.0 on Mac OS X 10.8): Tested on node 14.18.1 and node 18.3.0
We identified this while debugging an issue in FabricJS: fabricjs/fabric.js/issues/8030
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.