HTML Canvas — это удивительная технология для рисования, встроенная во все современные браузеры. С
помощью Canvas вы можете рисовать фигуры, управлять фотографиями, создавать игры и анимировать фактически что угодно —
всё это с правильными веб-стандартами.

Создание области и переменных

Прежде чем создавать стили, нужно создать саму canvas область. Для этого создадим в html,

<canvas id='canvas'></canvas>

а в js прописываем переменную,

const 
canvas = document.getElementById('canvas'), // создаем указатель на холст
elem = canvas.getContext('2d'); // создаем указатель на контекст рисования

Готово!

Начало работы с canvas

Теперь нам понадобятся некоторые свойства для очищения области canvas

Очищение области
canvas.width = canvas.width; //
elem.clearRect(0, 0, canvas.width, canvas.height); // способ не идеален, так как наследует ранее
заданные параметры
canvas.width = значение; // если canvas.width = 310, то значение = 310

Основные параметры

основные параметры
elem.width = x; // ширина
elem.height = y; // высота
elem.moveTo(x, y); // начало линии
elem.lineTo(x, y); // конец линии
elem.strokeStyle = ‘color’; // цвет линии
elem.lineWidth = n; // ширина линии
elem.lineCap = ’round || square’; // скругление концов
elem.stroke(); // объявляем линию (пусто, всегда после параметров)
elem.fillStyle = ‘color’; // заливка фигуры
elem.fill(); // объявляем заливку
elem.beginPath(); // начало контура || объявляем, что это новый контур
elem.closePath(); // конец (замыкание) контура

Создание дуг и окружности

Рисуем дугу
elem.arc(x, y, r, 0, Math.PI) // x, y — координаты центра
// r — радиус
// 0, (200 || Math.PI) — начальная и конечная точка
// 2 * Math.PI — применяется для создания окружности
Дуга при помощи квадратикКурвТу
elem.moveTo(x, y); // начальная точка
elem.quadraticCurveTo(x1, y1, x2, y2);

Прямоугольники

Прямоугольники
elem.strokeRect(x, y, w, h); // начальные точки, ширина и высота
elem.fillRect(x, y, w, h); // заливка фигуры
elem.clearRect(x, y, w, h); // очищение области

Кривая Безье

Кривая Безье
elem.moveTo(x, y); // начальная точка
elem.bezierCurveTo(dx1, dy1, dx2, dy2, x2, y2); // dx1, dy1, dx2, dy2 — точки соприкосновения
// x2, y2 — конечные точки

Работа с изображениями

Для начала необходимо создать переменную для изображения. Для этого есть три способа:

Создание переменных
let img = document.createElement(‘img’); // #1
let img = new image(); // #2

Затем выводим созданную переменную и добавляем саму картинку

img.src = 'ссылка на изображение';
let img = document.getElementById(‘img’); // #3, создаем изображение в html и присваиваем id=’img’
Работа с изображениями
elem.drawImage(img, x, y); x, y — верхний левый угол
elem.drawImage(img, x, y, w, h); w, h — параметры ширина и высота, создают размер изображения/деформация, как background-size
elem.drawImage(img, sx, sy, sw, sh, x, y, w, h); // 8 значений
sx, sy, sw, sh — вырезает область исходного изображения
x, y, w, h — параметры для вставки изображения

Работа с текстом

Работа с текстом
elem.fillText(‘любой текст’, x, y);
elem.strokeText(‘любой текст’, x, y);
elem.font = ‘bold 64px Arial’; // по аналогии с font в css
elem.baseline = »; // top, middle, alphabetic, ideographic, hanging
elem.textAlign = »; // center, start, end, letf, right
Сюда же применимы
elem.fillStyle = ‘color’;
elem.strokeStyle = ‘color’;
elem.lineWidth = ‘n’;

Работа с изображениями, наложение текста

Сначала создаем переменную для изображения (см. работа с изображениями), затем добавляем скрипт и редактируем по
необходимости

function drawText() {
  elem.font = 'bold 64px Arial';
  elem.fillStyle = elem.createPattern(img, 'repeat');
  elem.textAlign = 'center';

  const x = canvas.width / 2;
  elem.fillText('любой текст', x, 200);
}
drawText();

Создание градиента

Создаем новую переменную,

const grad = elem.createLinearGradient(x1, y1, x2, y2);

где, x1, y1, x2, y2 — направление градиента

createLinearGradient
elem.addColorStop(0,’color’); // color #1
elem.addColorStop(0.5,’color’); // color #2
elem.addColorStop(1,’color’); // color #3
// 0, 0.1, 0.2 … 1 // etc.
elem.fillStyle = grad;
elem.fillRect(x1, y1, x2, y2);
createRadialGradient
elem.createRadialGradient(x0,y0,r0,x1,y1,r1); x0 координата x стартового круга градиента
y0 координата y стартового круга градиента
r0 радиус начального круга
x1 координата x конечной окружности градиента
y1 координата y конечной окружности градиента
r1 радиус конечного круга

На этом пока все. Статья будет дополняться в ходе изучения материала. Более подробная информация доступна на сайте w3schools.