Я довольно долго пытался получить идеальные прямые линии на элементе холста. Я пробовал ряд решений, которые были предложены по другим проблемам с переполнением стека, а также по проблеме, открытой в репозитории github WebGL. Я все еще не уверен, что мне не хватает. Я пытаюсь нарисовать линейку (например, линейку текстового редактора) с треугольником, представляющим текущий отступ. Абзац текста под этой линейкой должен иметь левый отступ абзаца, соответствующий положению треугольника на линейке. Мне это удалось, но не все вертикальные линии на линейке идеально четкие, некоторые из них немного толще других. Вот моя тестовая песочница для этого случая . Единственное решение, которое очень хорошо работало (в отношении резкости) на моем экране (который имеет 1,25 devicePixelRatio), однако, не работает (в отношении размера линейки и выравнивания абзаца с линейкой) на экранах с разным dPR. Решение, которое работает (в отношении размера линейки и выравнивания абзаца с линейкой) для всех экранов, на которых я тестировал, не работает (в отношении резкости линий) ни на одном из экранов, на которых я тестировал. Есть идеи, как сделать вертикальные линии идеально четкими? Конечно, я мог бы смириться с тем, что они не идеальны, но я верю, что в конце концов это улучшит пользовательский интерфейс, когда сгенерированные графические интерфейсы c ui идеальны до пикселя.
Я не думаю, что это полезно публиковать весь код из примера 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 дюйм». Но мой главный приоритет сейчас, помимо сохранения синхронизации абзаца и линейки c, - это получение четких линий в пикселях ...
Выбор "ДЮЙМОВ" и "Повышенная точность прорисовки (на моем 1,25 dPR monitor) "из вышеупомянутого теста дает мне следующий результат: 
Но решение работает только на моем мониторе 1,25 dPR, и только при рисовании" INCHES ".
При выборе «Рекомендуемого рисования» (решение с веб-сайта Mozilla) абзац хорошо сочетается с линейкой на всех дисплеях, но дает мне такие вертикальные линии: 
I Я пробовал переводить контекст на 0,5, я пробовал переводить с помощью dPR, я пытался округлить положение x линии, которую мне нужно нарисовать, ничего не работает. Некоторые линии резкие, другие нет. (Я тестировал только Chrome кстати.) Я пробовал трехэтапный процесс, упомянутый в конце этого комментария , все еще не работал с округлением и без округления, с переводом и без него. ..
Я не пробовал getBoundingClientRect, как упоминалось в этом комментарии , я не уверен, как бы я его реализовал, если бы это могло быть решением, и кто-нибудь может помочь, я бы благодарен. Не стесняйтесь исправлять код в тесте песочницы jsbin.