html5 canvas game - how to add retina support

Question

I\'m creating an HTML5 canvas game for iPhone. I would like to support both retina and non-retina displays.

My question is, how do I support both retina and non-retina d

Answer 1

I know this is now an old post but thought I'd update it with the solution I implemented.

---

1: I used two sets of images:

• one for non retina displays (sized 1:1),
• and another set for retina which are twice as big.

depending on what device is being used depends on what set is loaded.

---

2: I then resize the canvas (this is the key to it)

NON RETINA

    var canvas = document.createElement('myCanvas');

    canvas.width = 320;
    canvas.height = 480;
    canvas.style.width = "320px";
    canvas.style.height = "480px";

RETINA

    var canvas = document.createElement('myCanvas');

    canvas.width = 640;
    canvas.height = 960;
    canvas.style.width = "320px";
    canvas.style.height = "480px";

Notice that canvas.style.width & height are the same regardless whether you're using retina or not.

---

And that's really all there is to it!