Текст и изображения на canvas

Задайте шрифт: ctx.font = "bold 24px sans-serif". Рисуйте текст: ctx.fillText("Hello", x, y) или ctx.strokeText("Hello", x, y). Координата y указывает на базовую линию текста — добавьте над ней высоту верхних выносных элементов, чтобы правильно разместить текст внутри ограничивающего прямоугольника.

ctx.textAlign управляет горизонтальным выравниванием: "left" (по умолчанию), "center", "right". ctx.textBaseline управляет вертикальным выравниванием относительно y: "top", "middle", "alphabetic" (по умолчанию), "bottom". Для центрирования текста задайте значения "center" и "middle".

ctx.measureText("text") возвращает объект TextMetrics с шириной и метриками шрифта. Используйте его для динамического вычисления позиций текста: для центрирования текста в прямоугольнике, переноса текста по максимальной ширине или выравнивания подписей по правому краю рядом с точками данных.

В Canvas нет встроенного переноса текста. Реализуйте его самостоятельно: измеряйте ширину слов, накапливайте их, пока ширина не превысит maxWidth, затем начинайте новую строку через интервалы lineHeight. Это распространённая вспомогательная функция в библиотеках отрисовки на холсте.

ctx.drawImage(image, dx, dy) рисует элемент изображения HTML, элемент холста HTML или элемент видео HTML в точке (dx, dy). Сначала загрузите изображение, а рисование выполняйте в его обработчике загрузки, чтобы перед рисованием пиксели уже были доступны.

ctx.drawImage(image, dx, dy, dw, dh) масштабирует изображение до размеров dw × dh. Соотношение сторон автоматически не сохраняется — вычисляйте размеры вручную. Чтобы сохранить соотношение сторон: dw = img.width * scale; dh = img.height * scale.

Вариант drawImage с девятью аргументами: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). Исходный прямоугольник (sx, sy, sw, sh) задаёт область обрезки изображения; конечный прямоугольник (dx, dy, dw, dh) размещает и масштабирует обрезанную область на холсте.

ctx.imageSmoothingEnabled = false отключает билинейную интерполяцию при масштабировании изображений. Используйте это для пиксельной графики, когда требуется чёткое масштабирование без сглаживания. Для фотографий оставляйте сглаживание включённым (это значение по умолчанию), поскольку при нём масштабирование выглядит лучше.

Передавайте холст в drawImage как источник, чтобы отрисовать один холст на другом. Это позволяет выполнять отрисовку вне экрана: рисуйте сложные композиции на скрытом холсте, а затем одной операцией на каждом кадре переносите этот холст на видимый.

ctx.globalAlpha (от 0 до 1) задаёт единообразную прозрачность для всех последующих операций рисования. ctx.globalCompositeOperation управляет смешиванием новых рисунков с уже существующими пикселями: "source-over" (по умолчанию), "multiply", "screen", "destination-out" (стирание) и другие режимы.

canvas.toDataURL("image/png") экспортирует холст как URL данных PNG в кодировке base64. Используйте это для загрузки по инициативе пользователя: создайте ссылку, задайте её href равным URL данных, а атрибуту загрузки — имя файла, затем программно нажмите на ссылку.

Для отображения текста на холсте используются ctx.font, fillText/strokeText, textAlign и textBaseline, а для вычислений при компоновке — measureText. Рисование изображений через drawImage поддерживает масштабирование и обрезку; globalAlpha и globalCompositeOperation управляют смешиванием. toDataURL экспортирует холст для загрузки или дальнейшего использования.