Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

[SOLVED] HTML5 canvas scaling nearest neighbor (no blur)

A topic by Sam Lancashire created Apr 04, 2016 Views: 5,664 Replies: 5
Viewing posts 1 to 5
(+3)

Took me forever to find this, so I thought I would share:

ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
Submitted(+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!

Submitted

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 !