Создавать холст HTML5 программно

У меня есть следующие фрагменты кода HTML

<body onload="main()" >
    ...
    <canvas id="myId" class="myClass"></canvas>
    ...
</body>

Работает так, как ожидалось. Я могу правильно отображать вывод.

Затем удаляю

<canvas id="myId" class="myClass"></canvas>

Потому что я хочу создать его программно с помощью следующего фрагмента кода JavaScript

var canvas = document.createElement("canvas");
canvas.className  = "myClass";
canvas.id = "myId";

К сожалению, это не сработало. Я ничего не могу показать с этим.

Мне интересно, скучаю ли я. Любая помощь приветствуется. Заранее благодарим за помощь.

Ответы

Ответ 1

Фактически вы должны прикреплять холст к документу. Прежде чем вы это сделаете, это просто отдельный элемент, который браузер не отображает.

var canvas = /* ... */;
/* ... */
document.getElementsByTagName('body')[0].appendChild(canvas);

Ответ 2

Вам нужно вставить новый элемент <canvas> в DOM. Чтобы положить его в конец тела, используйте:

document.body.appendChild(canvas);

с кодом, который его создает. (Если вы хотите поместить его в другой элемент, используйте вместо document.body.)

Ответ 3

const canvas = document.createElement("CANVAS");