Как начать рисовать на странице сайта через Canvas?

Рисование на странице делается через тег <canvas> и его JS-контекст. Сам canvas — это просто прямоугольная область («холст»), а всё рисование происходит в коде.

Шаг 1. Холст в HTML:

<canvas id="board" width="400" height="300"></canvas>

Важно: задавай размер через атрибуты width/height, а не через CSS — иначе картинка растянется и размылится.

Шаг 2. Получаем контекст и рисуем:

const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');

// прямоугольник
ctx.fillStyle = '#6366f1';
ctx.fillRect(20, 20, 120, 80);

// линия
ctx.beginPath();
ctx.moveTo(20, 150);
ctx.lineTo(200, 200);
ctx.strokeStyle = '#ec4899';
ctx.lineWidth = 3;
ctx.stroke();

// круг
ctx.beginPath();
ctx.arc(300, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = '#10b981';
ctx.fill();

Основная идея: всё через объект ctx. fillRect — закрашенный прямоугольник, beginPath/moveTo/lineTo/stroke — линии, arc — дуги и круги. Текст рисуется через ctx.fillText('привет', x, y).

Для анимации просто перерисовывай холст в цикле requestAnimationFrame, предварительно очищая его ctx.clearRect(0, 0, canvas.width, canvas.height).