Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines
(+4)

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                            */
}
(+1)

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! :)

(+1)

Awesome solution!