Bad image quality in compression with html5

I found a script for making images cylidner.
Here is example of how it works: https://codepen.io/neverov12/pen/yLejqzJ
But if i make it with node its makes wrong image quility. (first is node, second is web)
.
.

Code for node version (its async function inside):
```js
const canvas = createCanvas(500, 500);
ctx = canvas.getContext('2d');

const photo = await loadImage('https://i.imgur.com/HOQb8W6.png');
const photoCanvas = createCanvas(photo.width, photo.height);
const photoCtx = photoCanvas.getContext('2d');
photoCtx.drawImage(photo, 0, 0);

let iw = photo.width;
let ih = photo.height;

let xOffset = 104, //left padding
yOffset = 180; //top padding

let a = 130; //image width
let b = 30; //round ness

let scaleFactor = iw / (2.06 * a);

// draw vertical slices
for (let X = 0; X < iw; X += 1) {
let y = (b / a) * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation

if (!isNaN(y)) {
ctx.drawImage(
photoCanvas,
X * scaleFactor,
0,
iw / 20,
ih,
X + xOffset,
y + yOffset,
1,
300
);
}
}
```

Can i fix it any way?

## Environment
* Version of node-canvas: 2.6.1
* Environment: node 12.18.2, Windows 10