canvas.js

// !!! важен порядок положения параметров !!!

// все значения указываются без px

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

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


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

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(); // конец (замыкание) контура

let grd= elem.createLinearGradient(x1,y1,x2,y2); // начальные и конечные точки

let grd= elem.createRadialGradient(x0,y0,r0,x1,y1,r1); // от меньшего круга к большему
/* где,
x0 координата x стартового круга градиента
y0 координата y стартового круга градиента
r0 радиус начального круга

x1 координата x конечной окружности градиента
y1 координата y конечной окружности градиента
r1 радиус конечного круга
*/
// параметры цвета
grd.addColorStop(0, 'color');
grd.addColorStop(0.2, 'color'); // могут быть промежуточные значения
grd.addColorStop(0.5, 'color'); // могут быть промежуточные значения
// etc.
grd.addColorStop(1, 'color');

elem.globalAlpha = n; // sample (0.2), создает прозрачность, аналог opacity в css


// Анимация
elem.translate(x,y); // перемещение элемента по осям x и y
elem.transform(a,b,c,d,e,f);
/* где,
a - горизонтальное масштабирование
b - горизонтальное перекос
c - вертикальное перекос
d - вертикальное масштабирование
e - горизонтальное перемещение
f - вертикальное перемещение
*/
elem.rotate(angle);
/*
Рассчет по градусам к радианам: градусы * Math.PI / 180.
Пример: для поворота на 5 градусов укажите: 5 * Math.PI / 180
*/
elem.scale(cx,cy);


// Создание дуги
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 = 'ссылка на изображение'; // ссылка на получение изображения

// или #3 в html создаем <img scr='' alt=''>, присваиваем id='img' <img scr='' alt='' id='img'> и выводим через переменную
let img = document.getElementById('img');

elem.drawImage(img, x, y);
elem.drawImage(img, x, y, w, h);
elem.drawImage(img, sx, sy, sw, sh, x, y, w, h); // 8 значений
/* где,
x, y - верхний левый угол
w, h - параметры ширина и высота, создают размер изображения/деформация, как background-size
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';
*/


// Работа с изображениями, наложение текста
const img = document.createElement('img');
img.src = 'ссылка на изображение';

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

    const x = canvas.width / 2;
    elem.fillText('Canvas', x, 200);
}
drawText();


// Создание градиента
const grad = elem.createLinearGradient(x1, y1, x2, y2); // где, x1, y1, x2, y2 — направление градиента
elem.addColorStop(0, 'color'); // color #1
elem.addColorStop(0.5, 'color'); // color #2 промежуточное значение (не обязательно)
elem.addColorStop(1, 'color'); // color #3
/* сюда же в конце применяется
elem.fillStyle = grad;
elem.fillRect(x1, y1, x2, y2);
*/