Изменение DPI элемента canvas в HTML5

Question

Я ищу для создания хром-приложения, которое позволяет пользователю создавать несколько разных вещей, используя элемент canvas. После того, как все будет готово, я хотел бы использовать маску, чтобы вырезать все за пределами указанной области, а затем отправить изображение на принтер. Однако я должен иметь возможность точно контролировать печатный размер.

Когда я делал подобное приложение на питоне, было просто установить DPI в отношение разрешения к требуемым размерам. Я пытаюсь найти решение, простое, как это для HTML5.

Я нашел пару сообщений с просьбой о подобных вещах, но они остались без ответа и не имеют большой активности.

Любая помощь будет оценена!

Answer 1

Холст - это растровый (растровый) формат. Вы не можете просто увеличить DPI без появления каких-либо ужасных артефактов.

Вы можете записывать все чертежи, штрихи/заливки и т. Д., А затем во время печати создавать более крупный холст для печати и масштабировать все команды рисования в соответствии с холстом с более высоким разрешением. Если вы не используете растровые изображения или прямую манипуляцию пикселями, результаты будут хорошими. Хотя большие форматы холста могут быть проблематичными на некоторых устройствах и в браузерах. Лучше всего преобразовать все это в векторный формат, такой как SVG, и распечатать его. Или вообще пропустите холст и нарисуйте SVG.