drawImage quality when image is scaled down on Android

[Ezelia]

Hello,

 

I'm facing a problem with Android devices when scaling down images with drawImage, they are pixelised . while on iPad/iPhone the quality is excellent.

 

I noticed the same issue with Firefox/Chrome (desktop version), but since the game will not be scaled down on desktops it's not much an issue as on mobiles.

 

do you know how can I preserve quality (actually apply anti-aliassing) without costy techniques like imageData manipulation ?

 

thank's

[Ezelia]

no one ?

[BdR]

As far as I know you can stretch or reduce a canvas image in 2 ways:

1. use drawImage
2. use css

From your question, I assume you use drawImage for example like this?:

mycanvas.drawImage(myimg, 0,0,320,480, 0,0,160,240)

You could try changing the size using CSS. Maybe that will give a better result? The advantage of this is also that you can always draw to the canvas as if it's a fixed resolution, you don't have to handle any scaling or zoom factor etc. in your javascript code. I mean something like this:

/* in your css */#thecanvas {padding: 0px;width: 160px;height: 240px;}/* in your html */<canvas id="thecanvas" width="320" height="480"></canvas>

Also see this question on stack overflow: http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality

 

[Ezelia]

actually the CSS trick is not usable in my case. as I only want to resize some sprites and not the whole canvas.

 

and the solution provided in your link, use imageData witch will degrade performances .

 

 

I'll maybe use two sets of images ...

[OadT]

An idea of me: Scale your canvas via css like BdR mentioned. So use the doubled value for the width and heigth property of the canvas as in CSS. Then scale the Context of the canvas via ctx.scale(2,2)

 

If you draw an image normal there should be no difference (else set imagesmoothingenabled false) and if you scale an image down it might have a better quality

 

hope it helps

[spleen387]

I've never actually done this but are you trying context2d.scale?