html5 canvas game - how to add retina support

10,801

Solution 1

You use devicePixelRatio to separate retina displays from normal displays

Your game logic coordinates (sprite positions, etc.) must operate independently from the screen coordinates which will be always 2x multiplied on the retina display.

Your graphics assets must have two versions. High resolution version and 50% scaled down normal version. When you operate on retina display, you draw 2x size canvas, resized with CSS and on this canvas use high resolution assets.

Solution 2

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!

Solution 3

A new article has just been published on the topic over at html5rocks.com:

upsize your canvas width and height by devicePixelRatio / webkitBackingStorePixelRatio and then use CSS to scale it back down to the logical pixel size you want. Taking our above case where Chrome reports a webkitBackingStorePixelRatio of 1 and a devicePixelRatio of 2 we would scale the dimensions of the canvas by 2 / 1, i.e. multiply them by 2, then we would use CSS to scale it back down.

Share:
10,801
Jarrod
Author by

Jarrod

Developer. HTML5 canvas iOS word game: Scrabbled Eggs Open source project: phpimagemagician

Updated on June 09, 2022

Comments

  • Jarrod
    Jarrod almost 2 years

    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 displays?

    I.E., what is the general implementation for doing this? Do I write the game using the iPhone dimension and then add retina support? Or do I create the game retina size and add non-retina support? Is it best to have two images, one retina one non-retina? or just scale the retina image down? Do I have separate canvas sizes for retina and non-retina? Do I need to scale the mouse input?

    Basically, I have no idea on the general idea/logic to implementing both.

    Cheers, J

  • VichitraVij
    VichitraVij almost 11 years
    Jarrod, was wondering how your retina HTML5 iphone game performed. Could you get high enough FPS for good retina gameplay?
  • Kallewallex
    Kallewallex about 10 years
    Hi, I am using this and it works well. But when using this.target.getContext('2d').getImageData(x,y,1,1).data; it will not give the proper values, it will give non retina values.
  • Leastrio
    Leastrio over 9 years
    one tip is to set the pick a base height/width for canvas and then multiply by window.devicePixelRatio, which should mean scale it appropriately. e.g. canvas.width = baseWidth * window.devicePixelRatio; canvas.style.width = baseWidth + "px"