Took me forever to find this, so I thought I would share:
ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false;
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 :)
canvas { 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 */ }