Как нарисовать такой список примеров с помощью jspdf?

Question

[Islam Ibakaev]

Делаю генератор для примеров по ментальной арифметике.
При клике по generate будут созданы примеры, нарисованы в canvas, а картинки вставлены в pdf документ, который будет создан и отображён в правой части. Проблема в том, примеры в документы отображаются не чётко, как-то мутно.

Есть предположение, что лучше не рисовать в canvas, а стилизовать с помощью api самого jspdf.
Помогите понять, как стилизовать примеры с помощью самого jspdf, чтобы получить эквивалентный визуальный результат.

Comments

[alex]

нарисованы в canvas, а картинки вставлены в pdf документ, который будет создан и отображён в правой части

омг, а почему нельзя просто сгенериовать dom?

[Islam Ibakaev]

Alex, ну так сначала генерируется dom, потом dom рисуется в canvas(использовал эту схему из-за css стилей)

[Islam Ibakaev]

плюс данного способа - стили прописал через css, минус - качество картинки не-ахти

[alex]

Islam Ibakaev, т.е. чтобы вместо простого пути:
вводные данные --> генерация dom --> показываем юзеру

вы решили пойти таким путем?:
вводные данные --> генерация dom --> конвертация в canvas --> конвертация в pdf --> показываем юзеру

[Islam Ibakaev]

Alex, так и есть. Дело в том, что мне показали образец, там такой же путь.

[Islam Ibakaev]

Alex, даже если вы справа выведите не pdf, а просто html со примерами и рядом кнопку "скачать pdf", в любом случае, для генерации будете рисовать этот участок в canvas, чёткость будете потеряна.
А если просто добавить html в pdf документ с помощью метода .addHTML, то css стили не будут применены и нужно как-то по-другому(вероятно, с помощью самого jspdf) стилизовать. Отсюда и вопрос: как же такое нарисовать с помощью jspdf?

[alex]

Islam Ibakaev, я бы убедил заказчика что первый вариант лучше. А что до генерации пдф - плохо читали доки, там таблицу можно сделать.