Ciertas imágenes se ven borrosas cuando se dibujan en un lienzo HTML5.

El siguiente ejemplo dibuja dos imágenes usando context.drawImage(). Una de las imágenes está borrosa mientras que la otra se ve como se esperaba.

Código Javascript para dibujar la imagen en el lienzo - 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');

Cualquier ayuda sería apreciada. Gracias.