Hacker News Reader

I 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.

This article over on https://developer.mozilla.org/en-US/docs/Games/Techniques/Cr... mentions a CSS property `image-rendering` that could perhaps come in handy.

Plot to an image first then use https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...