HTML текстовое поле над элементом canvas

Question

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

Есть ли в любом случае, чтобы "плавать" элементы HTML поверх друг друга? Например, можно ли поместить текстовое поле поверх определенных частей моего холста, отключить рамку и установить цвет на цвет холста?

Спасибо

Answer 1

Вы можете использовать CSS position: absolute свойство с z-index: 1 для размещения элементов над холстом.

РЕДАКТИРОВАТЬ: добавлен пример: здесь 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>

Answer 2

Вы можете использовать как-то невидимый текстовый элемент управления, чтобы получить контроль над вводимым текстом и копировать innerHTML на холст при нажатии клавиши. Я делаю подобные вещи, копирую атрибуты вычисленного шрифта css текста, присутствующего в DOM, и многое другое. Z-индексы работают довольно прямо. Функция setFocus () тоже может помочь.