Это устранило проблему размытия для меня, спасибо.

Это устранило проблему размытия для меня, спасибо.

Я хочу предложить еще более простое решение:

Ваше решение регулирует «внутренние» размеры холста (каковы, по его мнению, его ширина и высота), чтобы они соответствовали его истинным размерам (каковы на самом деле его ширина и высота). Вы можете добиться этого с помощью свойств clientWidth и clientHeight элемента canvas, таким образом:

let c = document.getElementById («myCanvasId»);
let dpi = window.devicePixelRatio;
c.setAttribute («height», c.clientHeight * dpi);
c.setAttribute ( «Ширина», c.clientWidth * dpi);

clientWidth и clientHeight объясняются здесь: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight#Example