How to resize canvas without smoothing?

Question

Update

This is definitely related to how I scale the canvas. If I draw the same scene on the canvas and I do not change its width and height to fill the screen, it works fine.

What is the right way to resize canvas for full-screen environments?

---

I am writing a game engine for canvas, and I am having problems with scaling and image alias, I read a couple of answers for people who have similar problems. I changed my code to include the following settings on each of my canvases.

context.webkitImageSmoothingEnabled = false; context.mozImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; 

To make sure, I also included CSS alternatives for these rules.

 canvas { image-rendering: optimizeSpeed; // Older versions of FF image-rendering: -moz-crisp-edges; // FF 6.0+ image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming) image-rendering: -o-crisp-edges; // OS X & Windows Opera (12.02+) image-rendering: crisp-edges; // Possible future browsers. -ms-interpolation-mode: nearest-neighbor; // IE (non standard naming) } 

Here is an example of one of the source images I'm trying to make.

Then I zoom in from 16x16 to 64x64 and instead of exiting, looking like interpolating the nearest neighbor, I used it that way.

I get the same results in Chrome and Firefox. I also do not want to do the preprocessing step to scale the images. This is possible because this demo works for me.

Another thing is that the engine is designed for use in full screen mode, so I manually update the size of the canvas with this function.

 fill-screen = (canvas) -> canvas.width = document.body.clientWidth canvas.height = document.body.clientHeight 

Canvases are absolutely positioned in the upper left corner of their parent, except for this, they are not affected by rules that are not related to the browser.

Maybe I'm doing something stupid, but I've been looking at it for ages, and I'm not getting close. The code for the file in which I create the canvases and contexts is given here: https://gist.github.com/code-curve/9273248

Answer 1

If you change the size of the canvas, the anti-aliasing parameter will be reset (it may depend on the browser).

After resizing the canvas, simply reapply imageSmoothingEnabled .

 fill-screen = (canvas) -> canvas.width = document.body.clientWidth canvas.height = document.body.clientHeight // re-apply here on context 

I would also recommend using sizes instead of window.innerWidth and window.innerHeight .

My (free) retro context library may also be of interest.

Answer 2

If you don’t find the “actual” solution, you can always simply scale the graphics yourself:

 var ctxData = ctx.getImageData() , pixels = ctxData.data , width = 16 , height = 16 , mult = 4 ; for( var x=width*mult-1; x>=0; x-- ){ for( var y=height*mult-1; y>=0; y-- ){ // or something close to this pixels[ y*width*mult*4 + x ] = pixels[ y*width*4 + x ]; } } // pseudo code canvas.width *= mult; canvas.height *= mult; ctx.putImageData( ctxData );