How do browsers handle image resampling when resizing an image in canvas?

Question

Hi, I'm creating a video game using the canvas element and jQuery. Part of this requires drawing arched paths and circles. Unfortunately this creates subpixels and an antialiasing problem. No browser allows you to simply disable the antialiasing, so I've been thinking about using images that have circles within them. Another part of this is that the window for the game can change sizes depending on the browser window and will therefore change the size of images inside them.

A more thorough example of my question is: if I create an image at (e.g.) 80px and the game wants to scale it to 37px, can I have that as a prerender for objects inside my game? Additionally, if I do that, will the canvas render it with subpixels?

P.S. I'm not looking for any code samples, this is just a technical question that I can't seem to find any documentation on.

IE is too much for me. I can't handle having to recode almost every part of my javascript to work in IE. Firefox and Chrome are going to be the best performing anyways. — Andrew Bob Garrett, Dec 04 '12 at 22:59
Eh, actually IE10 is quite good. The most recent game I wrote required no recoding in IE10. — Loktar, Dec 05 '12 at 03:23

rezoner · Answer 1 · 2012-12-05T13:18:13.017

0

This may help you extending the idea of using images instead of paths to draw non-interpolated images.

ctx.imageSmoothingEnabled       = false;
ctx.mozImageSmoothingEnabled    = false;
ctx.oImageSmoothingEnabled      = false;
ctx.webkitImageSmoothingEnabled = false;

Also make sure to use integers when serving positions and dimensions;

ctx.drawImage(something, x | 0, y | 0);

edited Dec 05 '12 at 13:18

answered Dec 05 '12 at 13:10

rezoner

1,907
13
16

as for the use of integers : the more all Browser/platforms are GPU accellerated, the less usefull rounding will be. Allready this changes nothing on Chrome (23) PC/mac, for instance. – GameAlchemist Dec 05 '12 at 13:36
I agree Vincent - but still there is one more flaw when using floats - browsers are doing some sub pixel interpolation when float number is provided - http://seb.ly/2011/02/html5-canvas-sprite-optimisation/ – rezoner Dec 06 '12 at 14:27

How do browsers handle image resampling when resizing an image in canvas?

1 Answers1