V
V
Vyacheslav Tretiak2010-10-21 13:34:57
css
Vyacheslav Tretiak, 2010-10-21 13:34:57

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

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 the question

In order to leave comments, you need to log in

2 answer(s)
S
Sererator, 2010-10-21
@Serator

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.

K
Keyten, 2012-09-13
@Keyten

Webkit has webkitImageSmoothingEnabled.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question