I wanted to point out that using `image-rendering: pixelated` ends up with extremely ugly diagrams if, like me, you're on a machine with a non-integer devicePixelRatio.
Note: There's no way display an image in a browser 1x1 pixels, nor 1xN where N is an integer, without JavaScript. Say like your page, you set the canvas 768px, and you set its resolution to 384x256, Well on my machine with a devicePixelRatio of 1.3333333730697632 that means the requested display size 768px becomes 1024 devicePixels. 384 doesn't divide 1024 evenly and with `image-rendering: pixelated` that means every few src pixels is 3 pixels wide instead of 2.
Anyway, solutions:
1. Don't pixelate, instead go the other way, increase the resolution of the canvas and use scale or whatever other techniques to get smooth lines
2. Use JS to adjust the display size of the canvas so that it's some multiple of device pixels
Still not fully perfect because MacOS hides the true resolution of the display from apps but generally still ok as MacOS goes out of it's way to look good even with scaling.
For anyone wondering about the odd number, 1.3333333730697632 is (double)((float)1440 / 1080)). The exact value would be 1440 / 1080 = 1.333... (continued).
I wanted to point out that using `image-rendering: pixelated` ends up with extremely ugly diagrams if, like me, you're on a machine with a non-integer devicePixelRatio.
https://i.imgur.com/X3Xy4CE.png
Note: There's no way display an image in a browser 1x1 pixels, nor 1xN where N is an integer, without JavaScript. Say like your page, you set the canvas 768px, and you set its resolution to 384x256, Well on my machine with a devicePixelRatio of 1.3333333730697632 that means the requested display size 768px becomes 1024 devicePixels. 384 doesn't divide 1024 evenly and with `image-rendering: pixelated` that means every few src pixels is 3 pixels wide instead of 2.
Anyway, solutions:
1. Don't pixelate, instead go the other way, increase the resolution of the canvas and use scale or whatever other techniques to get smooth lines
2. Use JS to adjust the display size of the canvas so that it's some multiple of device pixels
Here's library for that: https://greggman.github.io/pixel-perfect.js/
Still not fully perfect because MacOS hides the true resolution of the display from apps but generally still ok as MacOS goes out of it's way to look good even with scaling.