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
I like your interactive animation, would you mind briefly describing how you did the canvas pixel art?
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.