I have an iPad 2 canvas app (game) and would like to get it to run on the new iPad retina display.

Simply put, what is the best method to stretch/shrink my iPad2 image for retina iPad models?

From the googling I've done, I've seen various methods but many include starting with retina sized images and scaling done.

I've also heard the performance of pushing retina quality sized pixels to the screen is slow, and that it is better to use iPad size images at the expense of some quality.

As it is right now, on the new iPad I see the top left quarter of my app, which makes sense, but performance is shocking pared to iPad 2.

Techniques I've seen include CSS media queries, using the pixel density, and CSS transforms - which are apparently quite fast.

Thanks

I have an iPad 2 canvas app (game) and would like to get it to run on the new iPad retina display.

Simply put, what is the best method to stretch/shrink my iPad2 image for retina iPad models?

From the googling I've done, I've seen various methods but many include starting with retina sized images and scaling done.

I've also heard the performance of pushing retina quality sized pixels to the screen is slow, and that it is better to use iPad size images at the expense of some quality.

As it is right now, on the new iPad I see the top left quarter of my app, which makes sense, but performance is shocking pared to iPad 2.

Techniques I've seen include CSS media queries, using the pixel density, and CSS transforms - which are apparently quite fast.

Thanks

• javascript
• canvas
• html5-canvas
• retina-display

Share Improve this question Follow edited Feb 20, 2013 at 21:24 Jarrod asked Jun 22, 2012 at 20:04 JarrodJarrod 9,46555 gold badges6060 silver badges7373 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I've put together a simple function to handle this problem. Basically, it takes the current canvas size and scales it by the device-pixel-ratio, shrinking it back down using CSS. It then scales the context by the ratio so all your original functions work as usual.

You can give it a shot and see how performance fares. If it isn't what you hoped for, you can just remove 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);
    }
}