Незначительное размытие при уменьшении HTML-холста

Question

У меня есть холст, который я хочу быть максимальным 400 пикселей x 400 пикселей. Когда я уменьшаю холст (например, для мобильных устройств), я замечаю, что есть какой-либо незначительный размыт для любого текста или изображений, которые я нарисовал.

E.g. Изменение размеров окна результата в этом jsfiddle я создал, и очень внимательно посмотреть на текст: http://jsfiddle.net/6xjz70d5/13/

код я использую для изменения размеров холста:

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

Как сворачивать то, что я вы нарисованы на холст без этого размытия?

Answer 1

Если вы собираетесь перемасштабировать холст с помощью CSS, тогда убедитесь, что вы всегда масштабируете пропорционально или увидите искажение. Несмотря на это, если размер сильно изменится, вы все равно увидите небольшое искажение.

Лучшая техника - прослушивать события window.onresize и фактически перерисовывать масштабированное изображение и масштабированный текст на холсте.

Если ваше изображение будет резко уменьшено, лучший результат будет иметь место, если вы используете мультимедийные запросы для доставки изображений соответствующего размера для каждого размера устройства (небольшое изображение для мобильных устройств, для планшета & большое для рабочего стола). Если вы просто не можете доставить изображения соответствующего размера, обязательно ознакомьтесь с этим замечательным ответом Stackoverflow о том, как получить невозмутимые результаты путем постепенного уменьшения исходного изображения: Html5 canvas drawImage: how to apply antialiasing