Элементы в холсте исчезают

Question

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

canvas {
  border: 1px solid red;
 }

<canvas>
  <table>
    <tr>
      <td>value 1</td>
      <td>value 2</td>
      <td>value 3</td>
      <td>value 4</td>
      <td>value 5</td>
    </tr>
  </table>
</canvas>

Answer 1

Canvas не похож на классические элементы HTML. Он предназначен для рисования графики и анимации.

Если вам необходимо использовать элемент html на холсте, это невозможно напрямую, но вы можете использовать некоторый API для рендеринга элементов html на холст (например: rasterizeHTML - пример на странице).

Но вы должны прочесть что-то простое использование холста w3schools canvas .

Или посмотрите живые примеры того, что возможно с canvas (например, с fabric.js API) и некоторыми другими демонстрационными примерами с canvas, чтобы кратко рассказать об использовании canvas.

Answer 2

Как указал Ггорлен, это не то, как должен использоваться элемент canvas.Вместо этого создайте элемент контейнера и поместите в него и холст, и таблицу.

Примером может быть:

<div style="position: relative;">
    <canvas style="position: absolute;">
    </canvas>

    <table style="position: absolute;">
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
            <td>value 4</td>
            <td>value 5</td>
        </tr>
    </table>
</div>

Это просто помещает таблицу выше холста.