CODEWITHSUNDEEP
javascripthtmlcanvas
Benzilla
Benzilla

Reputation: 111

Slight blur when scaling down HTML Canvas

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?

Upvotes: 0

Views: 883

Answers (1)

markE
markE

Reputation: 105015

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

Upvotes: 1

Related Questions