3 ms·
> The CSS declaration 'image-rendering: pixelated' does not fix that. IME crisp pixels in a WebGL canvas (I assume 2D canvas is the same) are possible on Chrom
by flohofwoe 4y ago
> The CSS declaration 'image-rendering: pixelated' does not fix that.
IME crisp pixels in a WebGL canvas (I assume 2D canvas is the same) are possible on Chrome, Firefox (and it seems in Safari now too, at least as of 16.3) with the following scary looking CSS, and also when rendering at half resolution on HighDPI displays:
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
I don't know which of those have become redundant over time though.
Examples:
- https://floooh.github.io/sokol-html5/imgui-sapp.html https://floooh.github.io/sokol-html5/imgui-sapp.html
- https://floooh.github.io/sokol-html5/debugtext-sapp.html https://floooh.github.io/sokol-html5/debugtext-sapp.html
...for WebGL rendering, of course you also need to use nearest filtering on anything that's rendered into the canvas before it's being upfiltered by the browser and/or window system.
- susam 4y agoThese CSS declarations do get the work done on Firefox 110 and Chrome 109 but Safari 15.2 still introduces antialiasing. I will try with Safari 16.3 sometime later. I have set up a test page here in case anyone wants to play with it: https://jsfiddle.net/uLob1yxr/ https://jsfiddle.net/uLob1yxr/ It does not seem to work for arbitrary monospace fonts though: https://jsfiddle.net/ku4jfeg2/ https://jsfiddle.net/ku4jfeg2/ Thanks for the nice comment!