Элемент <canvas> в HTML — это прямоугольная область, на которой с помощью JavaScript можно рисовать растровую графику: линии, фигуры, текст, изображения и анимацию. Он предоставляет низкоуровневый «холст», а всё рисование и перерисовка полностью контролируются скриптами через контекст рисования. Чаще всего используется для игр, визуализаций и всевозможных интерактивных эффектов.
<canvas> — это HTML-элемент, представляющий собой прямоугольную область растровой графики. Сам по себе он почти ничего не делает: чтобы рисовать, нужно в JavaScript получить контекст с помощью canvas.getContext('2d') или, например, 'webgl'/'webgl2' для 3D.
После отрисовки браузер хранит только итоговые пиксели, а не отдельные фигуры, поэтому любое изменение сцены обычно означает новую перерисовку «с нуля» — это делает <canvas> похожим на игровой рендеринг по кадрам. Такой подход даёт высокую гибкость и производительность, особенно для динамичной графики.
<canvas> оперирует пикселями: после того как вы нарисовали прямоугольник или круг, как отдельного объекта его больше не существует, остаётся только картинка. Для анимации или изменений нужно каждый кадр очищать холст и рисовать всё заново.const ctx = canvas.getContext('2d');), который предоставляет методы для рисования линий, фигур, текста, изображений, работы с отдельными пикселями и создания анимаций.<canvas> — это низкоуровневый растровый «холст» без отдельных DOM-узлов для фигур; SVG — векторная графика, где каждая фигура — отдельный DOM-элемент, который можно стилизовать и анимировать средствами CSS и JavaScript.<canvas>...</canvas>, показывается в браузерах без поддержки canvas и служит fallback-контентом (например, текст «обновите браузер»).Ниже простой пример, который показывает, как получить 2D-контекст и нарисовать примитивы на холсте: фон, прямоугольник и текст.
Во втором примере показано, как с помощью requestAnimationFrame организовать анимацию: мы очищаем холст каждый кадр, рисуем шарик в новой позиции и отражаем его от краёв.
Отметьте свой прогресс