Canvas drawing and Retina display: doable?

Question

Working with phoneGap implementing drawing with Canvas. The catch we\'ve run into is that canvas expects specific pixel dimensions. This is fine except that the iPhone 4\'s

Answer 1

EDIT: Just noticed I posted the wrong link for the demo!

Retina (or other hdpi display) canvas resolution is definitely possible. There is a working example here:

http://spencer-evans.com/share/github/canvas-resizer/

I've also bumped into this a few times. The accepted answer code is essentially correct, but you could also use a library solution. I whipped one up to handle intelligent canvas re-sizing to make the element more responsive and higher resolution (as shown in the demo).

https://github.com/swevans/canvas-resizer

Answer 2

I sat with the same problem last week and discovered how to solve it -

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

if (window.devicePixelRatio > 1) {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    canvas.width = canvasWidth * window.devicePixelRatio;
    canvas.height = canvasHeight * window.devicePixelRatio;
    canvas.style.width = canvasWidth;
    canvas.style.height = canvasHeight;

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

Full code on gist, demo on jsfiddle

Answer 3

WebCode (http://www.webcodeapp.com) is a vector drawing app that generates JavaScript HTML5 Canvas code for you. The code is Retina-compatible, you can check out how they do it.

Answer 4

There is a very good polyfill by TJ Holowaychuk:

https://www.npmjs.com/package/autoscale-canvas

Answer 5

I couldn't find anywhere else on the internet suggesting this so I figured it out. If you have a full screen canvas and you want it to be the actual amount of pixels that the device has, just remove this line from your HTML:

<meta name='viewport' content='width=device-width' />

Don't set the viewport at all. Then you just do:

canvas.width = innerWidth
canvas.height = innerHeight
canvas.style.width = innerWidth+'px'
canvas.style.height = innerHeight+'px'

That will use the full screen resolution of the device. A pixel will always be a pixel. You don't need to scale. And getImageData() will give the same values that you see.

Answer 6

There is a drop-in polyfill that will take care of most basic drawing operations for you, and remove the ambiguity between browsers that handle this automatically for you (safari) and others that don't.

https://github.com/jondavidjohn/hidpi-canvas-polyfill

You simply include it before your drawing code and it should give you decent retina support automatically.