JavaScript | Как создать холст canvas на странице без привязки контекста визуализации?

У нас есть шаблон HTML-документа:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Документ с холстом canvas</title>
</head>
<body>
<script>
</script>
</body>
</html>

Мы хотим в этом документе создать элемент холста canvas в самом простом виде без привязки контекста визуализации. Как это сделать?

Шаг № 1 — Обращение к объекту документа для создания нового элемента

Внутри элемента <script> мы будем писать наш код. Когда браузер загрузит страницу, тогда он попытается выполнить JavaScript-код, который будет заключён внутри тегов <script></script>

В переменной cs мы будем хранить новый созданный объект canvas.

let cs = document.createElement('canvas');

Шаг № 2 — Добавление нового элемента в качестве ребёнка body

Теперь нам нужно поместить новый созданный объект canvas в текущий документ. Куда мы будем его помещать? Предлагаю просто положить его в элемент <body>.

document.body.append(cs);

Давайте посмотрим на результат выполнения двух команд. На первый взгляд нет никаких изменений. Вроде страница белая по всему экрану. Но.

Создали объект холста canvas и поместили его в body - JavaScript — Создали объект холста canvas и поместили его в body — JavaScript

Внутри элемента <body> теперь лежит наш новый созданный элемент <canvas>. Он имеет размеры 300 х 150 пикселей т. к. мы явно не указали его размеры. Из-за этого размеры холста были выставлены «по умолчанию». У холста нет контекста визуализации, а значит и нет заливки никаким цветом — из-за этого он прозрачный и мы видим белый цвет т. к. сама страница белая.

Из документации

Атрибут ширины width по умолчанию равен 300, а атрибут высоты height по умолчанию равен 150.

Когда «режим контекста холста» отсутствует, элемент холста canvas не имеет контекста визуализации, а его растровое изображение должно быть прозрачным чёрным с внутренней шириной, равной числовому значению атрибута ширины width элемента, и внутренней высотой, равной числовому значению атрибута высоты height элемента, эти значения интерпретируются в пикселях CSS и обновляются по мере установки, изменения или удаления атрибутов.

Информационные ссылки

Стандарт HTML — Раздел «The canvas element» — https://html.spec.whatwg.org/multipage/canvas.html