Мозаичный холст, добавляющий плавающий текст

Question

В моем элементе canvas я хочу добавить перетаскиваемый текст поверх изображения. Пользователь должен перемещать его внутри области canvas. Я мог бы добавить текст с помощью некоторых функций API, но у меня нет идеи из движимого текста. Мне нужно использовать тег DIV для размещения текста? Но проблема в том, что мне нужно сохранить холст в качестве файла изображения, поэтому обычный тег DIV поверх холста не будет сохранен.

Я бы очень хотел услышать ваши комментарии.

Answer 1

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

Answer 2

Вы можете использовать SVG и некоторые текстовые элементы. В SVG каждый элемент является элементом DOM, поэтому вы можете, например, присоединить к нему события мыши.