2 ms·
This bothered me too! Although all pixel calculation in the code uses integers only, unfortunately HTML5 Canvas can by itself perform subpixel rendering and ant
by susam 4y ago
This bothered me too! Although all pixel calculation in the code uses integers only, unfortunately HTML5 Canvas can by itself perform subpixel rendering and anti-aliasing. I could not find a way to disable it. If there is a known solution to this that does not add too much complexity to the code, I would love a pull request for it at https://github.com/susam/invaders https://github.com/susam/invaders.
- wiredearp 4y agoThis article over on https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look https://developer.mozilla.org/en-US/docs/Games/Techniques/Cr... mentions a CSS property `image-rendering` that could perhaps come in handy.
- murkle 4y agoPlot to an image first then use https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...
- JKCalhoun 4y agoI see you specify a fixed context width/height. That's fine — who can guess what size the user's browser window will be.... I think in that scenario though you ought to create your own "off-screen canvas" to render your sprites/drawing/text to. Then when you have completed the render/loop, draw from your offscreen canvas's context to the browser canvas's context. As another replied, you can probably change the scaling attribute (turn off imageSmoothingQuality) to get what you want.