Как сохранить чёткость отображения при рисовании dom узла в canvas?

код
как выглядит
Делаю генератор примеров для школы ментальной арифметики. Генерирую pdf с помощью jspdf и вывожу в правую часть блока. Чтобы зацепить css, предварительно рисую #thehtml в canvas(чуть ниже самого блока) с помощью rasterizeHTML. Слева будут параметры на основе которых будут генерироваться примеры, но, пока я сам вбил примеры.
Если нажать на кнопку generate, то в правой части будут видны примеры(одновременно произойдёт скачивание pdf, это для теста, чтобы просмотреть результат в полном виде).
Какой же вопрос, скажете вы? Дело в том, что пусть всё и работает, но результате который rasterizeHTML рисует в canvas не совсем соответствует прототипу(#thehtml). А именно не нравится, что картинка получается нечёткая, слегка размытая.
Можно ли это как-то настроить что-ли, чтобы результат по чёткости соответствовал прототипу?

Я понимаю, что можно было не рисовать dom узел в canvas, а сразу передать 'этот узел в функцию pdf.fromHTML:
pdf.fromHTML(this.$refs.thehtml, 0, 50);

Результат будет чёткий, однако css не сработают.

UPDATED:
как выглядит fixed
Ошибка в консоли не позволяет pdf viewer загрузиться. Как решение это проблемы, можно забрать себе и посмотреть в debug(там всё работает).