Combination of ctx.globalCompositeOperation = "color-burn", ctx.globalAlpha < 1 and subpixel positioning causes weird rendering artifacts(vertical lines)

## Issue

Combination of
`ctx.globalCompositeOperation = "color-burn"` , `ctx.globalAlpha < 1` and subpixel positioning causes weird rendering artifacts(vertical lines).

### Example bug image

Expected result

And here how it works in the browser: https://925wi.csb.app/

Using other `globalCompositeOperation` (e.g. 'multiply') or removing `globalAlpha` or removing "subpixel" positioning fixes that issue.

Any help/pointers on how to fix this are greatly appreciated.

## Steps to Reproduce

```js
const fs = require("fs");
const { createCanvas, Image } = require("canvas");

const size = 200;

const canvas = createCanvas(size, size);
const ctx = canvas.getContext("2d");

ctx.fillStyle = "#f88";
ctx.fillRect(0, 0, size, size);

ctx.fillStyle = "#face8d";
ctx.fillRect(50, 50, 75, 75);

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 75, 75);

const img = new Image();
img.onload = () => {
// ctx.globalCompositeOperation = "multiply";
ctx.globalCompositeOperation = "color-burn";
ctx.globalAlpha = 0.5;
ctx.translate(0.1, 0.1);
// ctx.drawImage(img, 0.1, 0, 200, 200);
ctx.drawImage(img, 0, 0, 200, 200);
save();
};
img.onerror = (err) => {
throw err;
};
img.src = "http://placekitten.com/200/200";

function save() {
const out = fs.createWriteStream(__dirname + "/test.png");
const stream = canvas.createPNGStream();
stream.pipe(out);
out.on("finish", () => console.log("The PNG file was created."));
}

```

## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): `canvas@2.8.0`
* Environment (e.g. node 4.2.0 on Mac OS X 10.8): node v14.15.1 macOS 11.5.2 (but this also happens on other envs, e.g. linux)