Certain images are blurry when drawing them onto an HTML5 canvas.

The example below draws two images using context.drawImage(). One of the images is blurry whereas the other looks as expected.

Javascript code to draw the image onto the canvas - jsfiddle

function drawImage(canvasId, imageId) {
  var canvas = document.getElementById(canvasId);
  var ctx = canvas.getContext("2d");
  var img = document.getElementById(imageId);

  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img, 0, 0, img.width, img.height);
}

// draw blurry example
drawImage('canvas1', 'img1');

// draw non blurry example
drawImage('canvas2', 'img2');

Any help would be appreciated. Thanks.