Update the non-retina canvas app to display the retina

Question

I have an iPad 2 canvas app (game) and you want it to launch on the new iPad retina screen.

Simply put, what's the best way to stretch / shrink an iPad2 image for iPad retina models?

From the googling I made, I saw various methods, but many of them include retina-sized images and scaling.

I also heard that the performance of clicking on pixels with image quality on the screen is slow, and that it is better to use iPad-sized images due to some quality.

As of now, on the new iPad, I see the upper left quarter of my application, which makes sense, but the performance is shocking compared to the iPad 2.

The methods I've seen include CSS multimedia queries using pixel density and CSS transforms, which seem to be pretty fast.

thanks

Answer 1

I put together a simple function to solve this problem. Basically, it takes the current canvas size and scales it by the pixel ratio of the device, reducing it with CSS. Then it scales the context in relation, so all of your original functions work as usual.

You can give him a chance and see how performance rates are. If this is not what you were hoping for, you can simply delete it.

function enhanceContext(canvas, context) { var ratio = window.devicePixelRatio || 1, width = canvas.width, height = canvas.height; if (ratio > 1) { canvas.width = width * ratio; canvas.height = height * ratio; canvas.style.width = width + "px"; canvas.style.height = height + "px"; context.scale(ratio, ratio); } }