Slight blur when scaling down HTML Canvas

Question

I have a canvas that I want to be maximum 400px x 400px. When I scale down the canvas (e.g. for mobile devices) I'm noticing there is a very slight blur to any text or images I've drawn.

E.g. Resize the result window in this jsfiddle I created, and look very closely at the text: http://jsfiddle.net/6xjz70d5/13/

The code I'm using for resizing the canvas is:

function resize(){
    width = window.innerWidth;
    if(width<=400){
        canvas.style.width = width+'px';
        canvas.style.height = width+'px';
    }
}

How can I scale down what I've drawn to the canvas without this blur?

canvas -> text -> blur -> grrr. I have the same problem with text on my canvas and doing research it seems like a nightmare where people propose using half-pixel hacks to trick the dpi...blah, blah. I'm interested to see comments/answers. — Data, Aug 22 '15 at 20:15
On my screen and in my browser (Chrome) this is hardly noticeable and doesn't not be improved. This might differ on other browsers. — Bram Vanroy, Aug 22 '15 at 20:15
There doesn't seem to be a noticeable problem in Firefox either, could you give us a screenshot of this? If I need to *look very closely at the text* to see the problem simply because information is lost in compression, then it's not really a problem. — Spencer Wieczorek, Aug 22 '15 at 20:19
@SpencerWieczorek. I'm seeing some small change in the text--more change when scaled up rather than when scaled down. So I guess it's a valid concern. — markE, Aug 22 '15 at 20:36
It is very very slight I admit, but here is a [screenshot](https://gyazo.com/ee63ce3f3bca57afc8a9f9fa62359977) of the difference with the jsfiddle example (blurry image on the right). I've found the blur is a lot more noticeable on a mobile device. — Benzilla, Aug 22 '15 at 20:47

score 1 · Answer 1 · edited May 23 '17 at 12:06

If you're going to rescale the canvas with CSS, then be sure you always scale proportionally or you will see distortion. Even so, if the size changes dramatically you may still see some small distortion.

A better technique is to listen for window.onresize events and actually redraw a scaled image and scaled text on the canvas.

If your image will be downsized dramatically, the best result occurs if you use media queries to deliver appropriately sized images for each device size (small image for mobile, medium for tablet & large for desktop). If you just can't deliver appropriately sized images, be sure to check out this great Stackoverflow answer about how to get unblurry results by incrementally downsizing your original image: Html5 canvas drawImage: how to apply antialiasing

Slight blur when scaling down HTML Canvas

1 Answers1