.toDataURL produces different base64 text on different platforms

[soadzoor]

Hey,

I have a unit-test for thumbnail generation. Roughly, it works like this:

const vertices: PointDouble[] = [
	{x: 21, y: 11},
	{x: 21, y: 2},
	{x: 2, y: 7},
];
const boundarySpaceMap = new BoundarySpaceMap(
	{geometry: {polygonShape: {vertices}}}
);

expect(boundarySpaceMap.thumbnail).toEqual(
"data:image/png;base64,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"
);

The base64 string above is hardcoded from the first test which was generated on an ubuntu machine. It works on the ubuntu machine fine.

However, when I run the same test on my mac (m1 pro), it fails, because the received base64 string is different:

data:image/png;base64,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

For easier comparison, here they are again:
Thumbnail base64 generated on ubuntu (2170 characters long):

data:image/png;base64,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

Thumbnail generated on mac (m1 pro) (2182 characters long):

data:image/png;base64,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

Seemingly, they have the same exact colors, and same content, when I parse them as images. But somehow the base64 encoding is different. Maybe they use different levels of compression..?

Here is the logic for generating the thumbnail (I know it has some external functions, it you need those implementations as well, let me know):

public get thumbnail() {
		const canvas = ImageUtils.canvas;
		const ctx = ImageUtils.ctx;

		const dimension = Constants.RESOLUTION.XYICON;

		canvas.width = canvas.height = dimension;

		ctx.clearRect(0, 0, canvas.width, canvas.height);

		const geometryData = this.geometryData;
		const canvasCoords = THREEUtils.spaceCoordsToThumbnailCoords(geometryData, dimension, 1 / dimension);

		ctx.beginPath();

		ctx.moveTo(canvasCoords[0].x, canvasCoords[0].y);

		for (let i = 1; i < canvasCoords.length; ++i) {
			ctx.lineTo(canvasCoords[i].x, canvasCoords[i].y);
		}

		ctx.closePath();

		const color = this._parent.color.hex;

		ctx.strokeStyle = `#${color}`;
		const {r, g, b, a} = ColorUtils.hex2rgb(color, 0.1, "RGBObject") as IRGBObject;

		ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;

		ctx.stroke();
		ctx.fill();

		return canvas.toDataURL();
}

[soadzoor]

Some additional tests show me that the ctx.getImageData also produces slightly different numbers on mac vs ubuntu.
Maybe the default colorspace is different? How could I make them the same?

[soadzoor]

Comparing the two images here: https://www.diffchecker.com/image-compare/
When using the slider option, it's quite obvious that the lines are a bit different (in their thickness, maybe):

Is there something you could do about this?