Я играл с текстом на холсте, и, хотя его легко рисовать, с ним непросто взаимодействовать. Я начал внедрять функциональность клавиатуры, чтобы обновлять текст на холсте, но затем сдался, когда понял, что мне придется включать функции вырезания, копирования, удаления и отмены.
Есть ли все-таки "float" html-элементы поверх eachother? Например, можно ли плавать текстовое поле на некоторых частях моего холста, отключить границу и установить цвет в цвет холста?
Спасибо
Вы можете использовать свойство CSS position: absolute с z-index: 1 для размещения элементов выше холст.
EDIT: добавлен пример: здесь div, содержащий "1234", плавает поверх div, который содержит "abcd" (который может быть заменен элементом canvas)
<div id="wrapper">
<div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
abcd
</div>
<div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
1234
</div>
</div>
Вы можете использовать невидимый текстовый контроль "как-то", чтобы получить контроль над вводимым текстом и скопировать innerHTML на холст при нажатии клавиши. Я делаю аналогичные вещи, копируя вычисленные атрибуты css шрифта текста, присутствующего в DOM, и многое другое. Z-индексы работают довольно прямо. Функция setFocus() также может помочь.