Создание изображений в JavaScript

Есть разные способы создать изображение в браузере. Один из самых распространённых инструментов - тег <canvas>. JavaScript имеет специальные методы для рисования фигур внутри этого тега. Действия, совершаемые скриптом, динамически отображаются на странице и таким образом создаётся изображение.

Сначала нужно создать холст, на котором далее будет создаваться изображения. Его добавляет тег <canvas>. В атрибутах можно сразу установить размеры холста.

HTML код:

<canvas width="100" height="100"></canvas>

Холст прозрачный, на нём пока нет фигур, поэтому он никак не отображается.

Чтобы начать рисование, нужно установить контекст.

JavaScript:

let canvas = document.querySelector('canvas');
canvas.width = 500;
canvas.height = 300;
let ctx = canvas.getContext('2d');

В 10 строке производится обычный поиск элемента страницы. При необходимости ему можно динамически задать размеры. В строке 13 установлен контекст. Метод getContext() возвращает объект контекста. Контекст "2d" позволяет создавать двухмерную графику. Через обращение к методам этого объекта производится рисование.

Можно добавлять в изображение фигуры. Для примера нарисуем прямоугольник.

ctx.fillStyle = '#3080FF';
ctx.fillRect(20, 150, 200, 170);

Это пример создания простого изображения. Рисование конкретных фигур рассматривается в следующих темах.