I am used to use canvas elements to render images in HTML5. However on some browsers the images are quite blurry. I tried to replace the canvas elements with img elements then it becomes crystal clear. However for some image I have to use canvas because I am rendering text overlay on the images (BTW the text drawn with canvas are also blurry). I am not sure why the blurry happens and is there a way to get around that?
Asked
Active
Viewed 1.1k times
0
-
Are you resizing the original image using the resizing version of drawImage? If so, you might use one of the methods in this post: http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality – markE Feb 12 '14 at 18:00
-
Yes I set the width and height attributes of the canvas. However the picture is still crystal clear if I use img and resize it. – darklord Feb 12 '14 at 18:02
-
Make sure you set the width/height of the canvas element--not with CSS. If you disproportionally resize the canvas with CSS the resulting image will be distorted. So do it this way: var canvas=document.getElementById("myCanvas"); canvas.width=image.width; canvas.height=image.height. And again...if you're rescaling with drawImage you should check the link above. – markE Feb 12 '14 at 18:14
2 Answers
3
As you are not showing the code in question this answer will be generic - adjust as needed.
Simply set the canvas to the size of the image:
var img = document.getElementById('imageID'), /// provide the image
canvas = document.getElementById('canvasID'), /// provide the canvas element
ctx = canvas.getContext('2d'); /// context
canvas.width = img.width; /// set width = image width
canvas.height = img.height; /// set height = image height
ctx.drawImage(img, 0, 0); /// draw image 1:1 @ [0, 0]
If the canvas gets too big for the page you can then apply CSS to the canvas element or simply set the size you want directly on the canvas and draw the image this way:
canvas.width = 500; /// example values, replace with actual ones
canvas.height = 400;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); /// scale image
If this still does not help your image may be too big to scale down in a single step. This is because canvas typically uses bi-linear interpolation (for performance reasons) while the image element is often granted bi-cubic interpolation in the process of down-scaling (interpolation is used as a low-pass filter when down-scaling).
To overcome this you can use the technique I describe in this answer:
Html5 canvas drawImage: how to apply antialiasing
Community
- 1
- 1
3
The Problem is that Devices that have High-Resolution Screens can have a devicePixelRatio that is not 1:1 to get a crystal clear image and text. While Mac-Books with Retina Screen got a devicePixelRatio of 1:2, the Nexus 7, has a devicePixelRatio of around 1.325.
See more Information here: http://www.html5rocks.com/en/tutorials/canvas/hidpi/
