Как рисовать и сохранять рисунок в JavaScript?

Можно создать прозрачный слой canvas, настроенный на рисование (это уже по факту рисунок, который можно сохранить). После интегрировать именно в canvas текст, чтобы он появлялся не в тегах, а на холсте. Ну и по желанию все это можно будет сохранить.

В локальном хранилище это тоже можно сохранить (то, что указал выше), если преобразовать весь готовый холст в base64. Правда это работать будет только на сервере, иначе любые браузеры ругаются на преобразование.

Что на словах, что на деле это не особо легко.

если я правильно тебя понял, ты хочешь текст из html перенести на canvas с возможностью рисования, но так что бы можно было сохранить нарисованные дополнения с текстом как картинку?

Говоришь ты знаешь как сделать ввод текста и перевода. В таком случаи мы имеем два текста .
Мы знаем координаты текстов, мы знаем размер шрифта и прочее. Еще у нас есть canvas с нарисованными дополнениями. в таком случаи можно забиндить на нажатие какой-нибудь кнопки перенос текста на canvas. Просто с помощью команды ctx.fillText() отрисовываем тексты на canvas в координатах текстов которые у нас на html. Стили, размер и прочее тоже можно указать в коде. А сохранить это все дело можно кликнув правой кнопкой мыши на canvas и там будет "сохранить картинку как...".

Я бы сделал как-то так наверное, но это далеко не идеальный способ, уверен, есть лучше. Но как пример ._.