Context

Контекст канвас страницы

class Context
canvas

Ссылка на Canvas

fillStyle

Цвет заливки, можно задать через CanvasGradient, CanvasPattern

ctx.fillStyle = 'red';
font

Шрифт для рисования текста

ctx.font = '14px Arial';
globalAlpha

Уровень прозрачности, от 0 до 1

globalCompositeOperation

Управляет порядком объединения пикселов

  • copy (R = S), Ис­ход­ный пик­сел ри­су­ет­ся без уче­та це­ле­во­го пик­се­ла.
  • destination-atop (R = (1-α d )S + α s D), Ис­ход­ный пик­сел ри­су­ет­ся под це­ле­вым. Ес­ли ис­ход­ный пик­сел яв­ля­ет­ся про­зрач­ным, ре­зуль­ти­рую­щийпик­сел так­же бу­дет про­зрач­ным.
  • destination-in (R = α s D), Це­ле­вой пик­сел ум­но­жа­ет­ся на не­про­зрач­ность ис­ход­но­го, но цвет ис­ход­но­го пик­се­ла иг­но­ри­ру­ет­ся.
  • destination-out (R = (1-α s )D), Це­ле­вой пик­сел де­ла­ет­ся про­зрач­ным, ес­ли ис­ход­ный пик­сел не­про­зра­чен, и ос­та­ет­ся без из­ме­не­ний, ес­ли ис­ход­ный пик­сел про­зра­чен. Цвет ис­ход­но­го пик­се­ла иг­но­ри­ру­ет­ся.
  • destination-over (R = (1-α d )S + D), Ис­ход­ный пик­сел ри­су­ет­ся под це­ле­вым, и его ви­ди­мость за­ви­сит от про­зрач­но­сти це­ле­во­го пик­се­ла.
  • lighter (R = S + D), Цве­то­вые со­став­ляю­щие двух пик­се­лов про­сто скла­ды­ва­ют­ся, а их сум­мы об­ре­за­ют­ся, ес­ли пре­вы­ша­ют мак­си­маль­но воз­мож­ное зна­че­ние.

source-atop (R = α d S + (1-α s )D), Ис­ход­ный пик­сел ри­су­ет­ся по­верх це­ле­во­го, но ум­но­жа­ет­ся на его не­про­зрач­ность. По­верх со­вер­шен­но про­зрач­но­го це­ле­во­го пик­се­ла ни­че­го не ри­су­ет­ся.

  • source-in (R = α d S), Ис­ход­ный пик­сел ум­но­жа­ет­ся на не­про­зрач­ность це­ле­во­го. Цвет це­ле­во­го пик­се­ла иг­но­ри­ру­ет­ся. Ес­ли це­ле­вой пик­сел яв­ля­ет­ся про­зрач­ным, ре­зуль­ти­рую­щий пик­сел так­же бу­дет про­зрач­ным.
  • source-out (R = (1-α d )S), Ре­зуль­ти­рую­щий пик­сел по­лу­чит цвет ис­ход­но­го, ес­ли це­ле­вой пик­сел про­зра­чен, и про­зрач­ным, ес­ли це­ле­вой пик­сел не­про­зра­чен. Цвет це­ле­во­го пик­се­ла иг­но­ри­ру­ет­ся.
  • source-over (R = S + (1-α s )D), Ис­ход­ный пик­сел ри­су­ет­ся по­верх це­ле­во­го. Ес­ли ис­ход­ный пик­сел яв­ля­ет­ся по­лу­про­зрач­ным, цвет це­ле­во­го пик­се­ла бу­дет вли­ять на цвет ре­зуль­та­та. Это зна­че­ние яв­ля­ет­ся зна­че­ни­ем по умол­ча­нию
  • xor (R = (1-α d )S + (1-α s )D), Ес­ли ис­ход­ный пик­сел про­зра­чен, ре­зeль­та­том ком­по­зи­ции ста­нет це­ле­вой пик­сел. Ес­ли це­ле­вой пик­сел про­зра­чен, ре­зуль­та­том ста­нет ис­ход­ный пик­сел. Ес­ли оба пик­се­ла, ис­ход­ный и це­ле­вой, яв­ля­ют­ся про­зрач­ны­ми или не­про­зрач­ны­ми, в ре­зуль­та­те по­лу­чит­ся про­зрач­ный пик­сел.
linaCap

Окончание линии

  • butt - Это зна­че­ние по умол­ча­нию. Оно ука­зы­ва­ет, что окон­ча­ния ли­ний не долж­ны ри­со­вать­ся. В этом слу­чае ко­нец ли­нии вы­гля­дит про­сто как пер­пен­ди­ку­ляр к бо­ко­вым сто­ро­нам ли­нии. Ли­ния не вы­сту­па­ет за свои ко­неч­ные точ­ки.
  • round - Это зна­че­ние ука­зы­ва­ет, что ли­ния долж­на иметь на­ко­неч­ник в ви­де по­лу­кру­ га с диа­мет­ром, рав­ным тол­щи­не ли­нии; в ре­зуль­та­те ли­ния вы­сту­па­ет за ко­ неч­ные точ­ки на по­ло­ви­ну сво­ей тол­щи­ны.
  • square - Это зна­че­ние ука­зы­ва­ет, что ли­ния долж­на иметь окон­ча­ние в ви­де квад­ра­та. Это зна­че­ние по сво­ему по­ве­де­нию на­по­ми­на­ет зна­че­ние «butt», но при ис­поль­ зо­ва­нии дан­но­го зна­че­ния ли­ния вы­сту­па­ет за ко­неч­ные точ­ки на по­ло­ви­ну сво­ей тол­щи­ны.
lineJoin

Тип скругления углов.

  • miter - значение по умолчанию, внеш­ние края двух ли­ний в точ­ке со­пря­же­ния долж­ны быть про­дол­же­ны, по­ка они не пе­ре­се­кут­ся.
  • round - скругление, внеш­ние края ли­ний, об­ра­зую­щих вер­ши­ну, долж­ны со­пря­гать­ся за­кра­шен­ной ду­гой, диа­метр ко­то­рой ра­вен тол­щи­не ли­ний
  • bevel - фаска, внеш­ние края ли­ний, об­ра­зую­щих вер­ши­ну, долж­ны со­пря­гать­ся за­кра­шен­ным тре­уголь­ни­ком
lineWidth

Толщина линий обводки

ctx.lineWidth = 3;
miterLimit

Максимальная длина сопряжения для типа скругления углов, mitter

shadowBlur

Степень размытия краев тени

shadowColor

Цвет тени

shadowOffsetX, shadowOffsetY

Смещение тени

strokeStyle

Цвет линии, можно задать через CanvasGradient, CanvasPattern

ctx.strokeStyle = 'red';
textAlign

Выравнивание текста по горизонтали

textBaseline

Положение базовой линии

arc(x, y, radius, startAngle, endAngle[, anticlockwise])

Рисование дуг

ctx.arc(100, 100, 30, 0, Math.PI * 2);
arcTo(x1, y1, x2, y2, radius)

Рисование дуг

beginPath();

Начинаем рисование геометрической фигуры

ctx.beginPath();
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Рисование кривых Безье третьего порядка

clearRect(x, y, h, w)

Очистка указанной области

ctx.clearRect(0, 0, 50, 50);
clip()

Вы­чис­ля­ет пе­ре­се­че­ние внут­рен­ней об­лас­ти те­ку­ще­го кон­ту­ра с те­ку­щей об­ла­стью от­сеч­ки и ис­поль­зу­ет эту по­лу­чен­ную об­ласть как но­вую об­ласть от­сеч­ки.

closePath()

Замыкаем линии геометрической фигуры

ctx.closePath();
createImageData(imagedata)
createImageData(w, h)

Возвращает ImageData

createLinearGradient(x0, y0, x1, y1)

Возвращает CanvasGradient

createPattern(image, reppetition)

Возвращает CanvasPattern, шаблон заполнения холста на основе готового изображения

  • reppetition

    • repeat - Изо­бра­же­ние вы­кла­ды­ва­ет­ся мо­заи­кой в обо­их на­прав­ле­ни­ях. Это зна­че­ние по умол­ча­нию.
    • repeat-x - Изо­бра­же­ние вы­кла­ды­ва­ет­ся мо­заи­кой толь­ко по оси X.
    • repeat-y - Изо­бра­же­ние вы­кла­ды­ва­ет­ся мо­заи­кой толь­ко по оси Y.
    • no-repeat - Изо­бра­же­ние мо­заи­ки не по­вто­ря­ет­ся, а ис­поль­зу­ет­ся од­но­крат­но.
createRadialGradient(x0, y0. r0, x1, y1, r1)

Возвращает CanvasGradient

drawImage(img, x, y[, w, h])
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)

Рисуем на канвасе картинку

fill()

Залить замкнутый контур

fillRect(x, y, h, w)

Залить замкнутый контур, прямоугольник

ctx.fillRect(0, 0, 100, 100);
fillText(text, x, y[, maxWidth])

Рисует текст

ctx.fillText('Hello', 0, 0);
getImageData(sx, sy, sw, sh)

Возвращает маcсив пикселов холста

isPointInPath(x, y)

Проверяет, попадает ли точка в пределы текущего контура

lineTo(x, y)

Рисуем линию от текущего положения маркера, до указанной

ctx.lineTo(0, 0);
measureText(text)

Вычисляет ширину текста, которую он займет при рисовании с текущим значением свойства и возвращает TextMetrics

moveTo(x, y)

Перемещаем маркер на указанную позицию

ctx.moveTo(0, 0);
putImageData(imagedata, dx, dy[, sx, sy, sw, sh])

Устанавливает отдельные писксели

quadraticCurveTo(cpx, cpy, x, y)

Рисование кривых Безье 2 порядка

rect(x, y, w, h)

Рисование прямоугольника

ctx.rect(100, 100, 30, 30);
restore()

Востоанавливаем предыдущее сохраненное состояние контекста

rotate(angle)

Поворачивает матрицу рисования на указанный угол

save()

Сохраняем копию текущего состояния

scale(sx, sy)

Изменение масштаба матрицы рисования

setTransform(a, b, c, d, e, f)

Задаем матрицу преобразования

stroke()

Отрисовать все

ctx.stroke();
strokeRect(x, y, w, h)

Отрисовка прямоугоника без заливки

ctx.fillRect(0, 0, 100, 100);
strokeText(text, x, y[, maxWidth])

Рисует контуры текста

transform(a, b, c, d, e, f)
translate(x, y)

Переносим начало позиции координат на указанную точку