Took me forever to find this, so I thought I would share:
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
Great! I don't need it for this jam but I did want to try making a HTML5 game sometime, so thanks for the info.
As I'm working with Phaser (which uses PIXI for its graphics) I still ran into issues due to the canvas being scaled with CSS instead of HTML attributes.
It took me ages, but I managed to fix it in most modern browsers. I'll add my solution for anyone with the same problem :)
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Awesome future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
Thanks for this!
I was previously using the render method to duplicate the display to a scaled up canvas, but using that method doesn't allow for and mouse interaction.
You're way is a much cleaner way to go about it as well, thanks! :)
Well that's handy. Should have thought of this before I started manually scaling everything up x4! XD
Discovering this solution one year after . And i'm happy to see that someone got the solution.... This is the canvas-zoom graal !
Thank you !