How to stretch an image on a canvas *without* anti-aliasing (in webkit)

Question

css

It is necessary to enlarge the image by 2, 3, 4, etc. times, moreover, to preserve the pixelation.

What I tried:
1) through css to increase the size of the canvas. +) fast -) there is anti-aliasing
2) mozImageSmoothingEnabled=false; drawImage(...). +) fast, no smoothing -) gecko only
3) getImageData/putImageData and increase manually. +) no smoothing -) obviously slower than native methods.

I use method number 3, in my case (different loops, update by region) it works instantly.
But!

There has been a lot of talk lately about the death of flash and the unconditional victory of html5. So, in flash, you can turn off anti-aliasing, but what about the great and mighty html5? Is it really impossible to make such a primitive in this giant that kills Flash on the spot (that is, so that it is cross-browser friendly)?

ps in some places I forgot to put the sarcasm tags.

Answer 1

Gecko also has https://developer.mozilla.org/en/CSS/image-rendering. They write there that this is not available in webkit, but, perhaps, it already exists. Need to check. + in svg this may be available.

Answer 2

Webkit has webkitImageSmoothingEnabled.