Yeah, it's really pretty simple -- there's a CSS rule `image-rendering: pixelated;` which sets it to use nearest-neighbor resampling. Then you render a canvas that's half the width of your screen and scale it up.
You kinda have to use WebGL for this to look good, though, because the vanilla 2D canvas has no way to disable anti-aliasing, so you can't really get those crisp pixely lines.
Comments
Yeah, it's really pretty simple -- there's a CSS rule `image-rendering: pixelated;` which sets it to use nearest-neighbor resampling. Then you render a canvas that's half the width of your screen and scale it up.
You kinda have to use WebGL for this to look good, though, because the vanilla 2D canvas has no way to disable anti-aliasing, so you can't really get those crisp pixely lines.