Суть задачи в том, чтобы использовать JavaScript для генерации нужной разметки HTML-документа, которая будет содержать в себе только один элемент холста canvas залитый квадратом красного цвета размером 100 на 100 пикселей. Как это сделать?
Ниже готовый код. Протестируйте!
<!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 с красным квадратом 100 на 100 пикселей на странице</title>
</head>
<body>
<script>
let cs = document.createElement('canvas');
cs.width = 100;
cs.height = 100;
let ctx = cs.getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, cs.width, cs.height);
document.body.append(cs);
</script>
</body>
</html>
Как это работает?
let cs = document.createElement('canvas');
Обращаемся к текущему объекту документа (document), который был создан в момент открытия страницы в браузере. Для создания нового объекта холста мы используем метод createElement(). Внутрь метода мы передаём строковое представление названия нужного нам HTML-элемента. В нашем случае это строка 'canvas'. Для созданного объекта холста мы создаём ссылку-привязку при помощи объявления переменной cs (сокращение от canvas).
cs.width = 100;
cs.height = 100;
Для созданного объекта canvas мы задаём размеры холста. Они измеряются в пикселях. Ширина и Высота будут по 100 пикселей. Мы специально задали такие размеры, чтобы в итоге получился квадрат.
let ctx = cs.getContext('2d');
Холсты не умеют жить самостоятельно. Создание объекта в документе всего навсего говорит о существовании некоего контейнера, в котором должна быть какая-то графика - со своими цветами, линиями, текстами, переходами и тому подобное.
За наполнение холста полезной графической информацией отвечает КОНТЕКСТ. У любого холста должен быть свой контекст визуализации. Всего из существует 5, но мы воспользуемся самым простым, который отвечает за плоские рисунки - это контекст "2d".
Привязать контекст к нужному холсту можно при помощи метода getContext(). Объект контекста мы сохраним в переменную ctx (сокращение от context)
ctx.fillStyle = "#FF0000";
После привязки контекста мы должны создать СТИЛЬ для нашего КОНТЕКСТА. Мы решили получить красный квадрат, значит нужно произвести заливку нашего КОНТЕКСТА цветом "#FF0000". Цвет зафиксирован в свойстве fillStyle.
ctx.fillRect(0, 0, cs.width, cs.height);
Теперь нужно указать координаты заливки цветом нашего КОНТЕКСТА, а также размер фигуры заливки. Метод fillRect() принимает 4 параметра.
Первые два параметра - это стартовое положение. 0 и 0 говорит о том, что заливка начнётся от левого верхнего угла.
Вторые два параметра - это расстояние, на которое будет произведена заливка - вправо и вниз. Измеряется также в пикселях. В нашем случае мы получаем расстояния заливки из значений свойств ширины и высоты самого объекта холста.
Это выражение позволит нам залить весь объект холста красным цветом от начала и до конца.
document.body.append(cs);
Финальным шагом будет интеграция нашего объекта холста внутрь объекта body. Это нужно для того, чтобы мы смогли визуально увидеть результат наших манипуляций. В этом нам поможет метод append().
Итоговый результат
Информационные ссылки
JavaScript | Холст canvas с двумя контекстами визуализации 2d
Стандарт DOM - Раздел "createElement(localName [, options])" - https://dom.spec.whatwg.org/#ref-for-dom-document-createelement①
Стандарт DOM - Раздел "append(nodes)" - https://dom.spec.whatwg.org/#ref-for-dom-parentnode-append①
Стандарт HTML - Раздел "width and height" - https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element:the-canvas-element-19
Стандарт HTML - Раздел "canvas.getContext(contextId [, options ])" - https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-getcontext-dev
Стандарт HTML - Раздел "context.fillStyle [ = value ]" - https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fillstyle-dev
Стандарт HTML - Раздел "context.fillRect(x, y, w, h)" - https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fillrect-dev
