У меня было довольно много времени, когда я пытался получить идеальные пиксельные прямые линии на элементе холста. Я пробовал ряд решений, которые были предложены для других проблем с переполнением стека, а также для проблемы, открытой в репозитории WebGL github. Я все еще не уверен, что мне не хватает. Я пытаюсь нарисовать линейку (например, линейку текстового процессора) с треугольником, представляющим текущий отступ. Абзац текста под этой линейкой должен иметь левый отступ абзаца, совпадающий с положением треугольника на линейке. Мне это удалось, но не все вертикальные линии на линейке идеально четкие, некоторые чуть толще других. Вот моя тестовая песочница для этого случая. Единственное решение, которое работало очень хорошо (с точки зрения резкости) на моем экране (у которого 1,25 devicePixelRatio), не работает (с точки зрения размера линейки и выравнивания абзаца по линейке) на экранах с другим значением dPR. Решение, которое работает (в отношении размера линейки и выравнивания абзаца по линейке) для всех экранов, на которых я тестировал, не работает (в отношении четкости линий) ни на одном из экранов, на которых я тестировал. Любые идеи, как я могу сделать вертикальные линии идеально четкими? Я, конечно, мог бы смириться с тем, что они не идеальны, но я считаю, что в конце концов это улучшает взаимодействие с пользователем, когда сгенерированные графические интерфейсы пользовательского интерфейса являются идеальными пикселями.
Я не думаю, что полезно размещать здесь весь код из примера jsbin, но в основном я делаю то, что рекомендуется на веб-сайте Mozilla:
//options.rulerLength == 6.25, options.initialPadding == 35
options.canvasWidth = (options.rulerLength * 96 * window.devicePixelRatio) + (options.initialPadding*2);
canvas.style.width = options.canvasWidth + 'px';
canvas.style.height = options.canvasHeight + 'px';
canvas.width = options.canvasWidth * window.devicePixelRatio;
canvas.height = options.canvasHeight * window.devicePixelRatio;
context.scale(window.devicePixelRatio,window.devicePixelRatio);
В моем первоначальном стремлении я наивно намеревался сделать линейку с точным реальным размером единицы измерения, пока, исследуя, я не обнаружил, что в настоящее время это невозможно (и считается не важным для веб-стандартов), поэтому я отказался от попыток заставить линейку соответствовать реальная единица измерения — дюймы или сантиметры (поскольку этот пользовательский интерфейс будет частью надстройки для Google Docs, я даже пытался измерить линейку в верхней части документа Google Docs, и на самом деле она не соответствует реальным единицам измерения в дюймах) . И поэтому я дал название «дюймовая линейка CSS», я отказался от попыток создать настоящую дюймовую линейку и согласился создать «единичную дюймовую линейку CSS». Но моим главным приоритетом сейчас, помимо синхронизации абзаца и линейки, является получение четких линий до пикселя...
Выбор «ДЮЙМОВ» и «Большая точность прорисовки (на моем мониторе 1,25 dPR)» из выше упомянутый тест дает мне следующий результат: Но решение работает только на моем мониторе 1,25 dPR и только при рисовании «ДЮЙМОВ».
Выбор «Рекомендованного рисования» (решение с веб-сайта Mozilla) позволяет абзацу хорошо выровняться с линейкой на всех дисплеях, но дает мне такие вертикальные линии: 
Я пробовал переводить контекст на 0,5, пробовал переводить по dPR, пробовал округлять позицию x линии, которую мне нужно нарисовать, ничего не работает. Одни линии четкие, другие нет. (Кстати, я тестировал только Chrome.) Я пробовал трехэтапный процесс, упомянутый к концу этого комментария все равно не работало с округлением и без, с переводом и без...
Я не пробовал getBoundingClientRect, как указано в этом комментарии, я Я не уверен, как бы я это реализовал, если бы это могло быть решением, и кто-нибудь может помочь, я был бы признателен. Не стесняйтесь подправить код в тесте песочницы jsbin.
