Draw image on canvas with the Retina display

Question

It is a web App in phonegap I have used a 320 by 480 image to draw but it fuzzy.

html

<canvas id="canvas" height=480 width=320>
Your browser does not support the HTML5 canvas tag.</canvas>

javascript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(images[index],0,0,320,480);

How to draw clearly on the retina display?

Answer 1

If you have access to a larger versions of your images, you can double the visible resolution.

The source images would need to be 640x960:

This is the code to "pixel double" the resolution of an image.

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

If not, you could use the same "pixel doubling" effect and present a smaller but clearer version using your existing images:

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