Можно ли установить размер растрового изображения на холсте HTML5, чтобы он точно соответствовал размеру дисплея в пикселях устройства, то есть количеству физических пикселей, используемых для отображения холста, даже если window.devicePixelRatio не целое число?
Существует хорошее описание того, как изменить размер холста на webglfundamentals , но он неправильно обрабатывает нецелые devicePixelRatio s. Мое понимание до сих пор:
- Размер отображения холста задается в CSS с помощью, например,
canvas {width: 200px;}.
- Базовый размер растрового изображения устанавливается, например,
<canvas width="100"/> в HTML или canvas.width = 100 в JS.
- Растровое изображение будет растянуто до размера CSS (как это зависит от
object-fit и object-position).
- Мы можем установить размер растрового изображения равным некоторому выражению, включающему
canvas.clientWidth.
canvas.clientWidth - целое число, его единицей являются пиксели CSS, а также вычисленная ширина содержимого (плюс отступ). Я не знаю, на самом ли деле браузеры отображают контент в целом количестве пикселей CSS или целом числе пикселей устройства.
Итак, webglfundamentals предлагает что-то вроде
canvas.width = Math.floor(canvas.clientWidth * window.devicePixelRatio);
, но если window.devicePixelRatio является дробью, это иногда не работает (линии шириной 2 пикселя, нарисованные на целочисленных координатах, нечеткие). Мой экран 1920x1080 по умолчанию имеет devicePixelRatio, равный 1,5, и масштабирование страницы может повлиять на это, поэтому множество причин, по которым devicePixelRatio, как правило, не является целым числом. Что мы можем сделать?