В этой публикации хочу рассмотреть создание одного элемента холста canvas при помощи JavaScript. Внутри этого элемента будут созданы два контекста визуализации с режимом "2d", которые будут представлять собой два квадрата.
Первый квадрат фиолетового цвета будет закрывать всё пространство холста. Второй квадрат жёлтого цвета будет меньше и он будет логически отцентрован относительно холста.
То есть маленький квадрат должен быть расположен над большим. Как это сделать?
Пример кода с комментариями
<!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>
// Создаём в документе новый элемент холста
let cs = document.createElement('canvas');
// Присваиваем холсту значения ширины и высоты
cs.width = 600;
cs.height = 600;
// Создаём первый контекст визуализации в режиме '2d'
let ctx1 = cs.getContext('2d');
// Указываем стиль заполнения контекста. Фиолетовый цвет.
ctx1.fillStyle = '#80475e';
// Указываем прямоугольную область заполнения цвета
ctx1.fillRect(0,0,cs.width,cs.height);
// Создаём второй контекст визуализации в режиме '2d'
let ctx2 = cs.getContext('2d');
// Указываем стиль заполнения контекста. Жёлтый цвет.
ctx2.fillStyle = '#f0f757';
// Указываем прямоугольную область заполнения цвета
ctx2.fillRect(cs.width/4, cs.height/4, cs.width/2, cs.height/2);
// Помещаем элемент холста внутрь элемента body для отображения его на странице
document.body.append(cs);
</script>
</body>
</html>
Как выглядит холст на странице?
Информационные ссылки
JavaScript | Как создать холст canvas с красным квадратом 100 на 100 пикселей на странице?
Стандарт 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
