ctx.fillStyle = "#4141ca"; - Стиль заполнения
ctx.fillRect(x,y,width,height); - Заполняет
ctx.strokeStyle = "#4141ca" - Стиль обрарамления
ctx.lineWidth = 5 - Толщина вооброжаемого карандаша
ctx.strokeRect(x,y,width,height) - Обрамляет
ctx.strokeStyle - Также изменяет стиль линий
ctx.clearRect(x,y,width,height) - Очищает указанный прямоугольник
ctx.moveTo(x,y) - Перемещает вооброжаемый карандаш
ctx.lineTo(x,y) - Рисует линию от текущей точки
ctx.lineWidth = 5 - Толщина вооброжаемого карандаша
ctx.lineCap - Как линия заканчиваются (butt(default), round, square)
ctx.lineJoin - Как линии соеденияются (round, bevel, miter(default))
ctx.miterLimit - Ограничение соедений линий
ctx.beginPath() - Новый набор операций по рисованию
ctx.stroke() - Собирает все текущие команды по путям и рисует их
ctx.save() - Сохраняет текущее состояние ctx
ctx.restore() - Возвращает сохраненное состояние ctx
ctx.beginPath() - открываем
ctx.arc(x,y,r,sA,eA,aC) - x,y - центр | r - радиус | sA - начальный угол | eA - конечный угол | aC - в какую сторону true false
ctx.arcTo(x1,y1,x2,y2,r)
ctx.fill() - Заполняет круг
var radians = (Math.PI / 180) * degress
ctx.closePath() - закрываем
ctx.bezierCurveTo(cx1,cy1,cx2,cy2,end1,end2) - cx,cy - контрольные точки
ctx.quadraticCurveTo(cx,cy,x,y);
ctx.font -"12px Impact" шрифт как в css
ctx.textAling - start(default), end, left, right, center
ctx.textBaseline - top, hanging, middle, alphabetic(default), ideographic, bottom
ctx.fillText(txt,x,y,[maxWidth]) - Заполнить текст
ctx.strokeText(txt,x,y,[maxWidth]) - Заполнить текст
ctx.measureText(text) - Вернет размерные показатели строки, которые передашь
ctx.shadowColor = "#13c1ca" - Цвет тени
ctx.shadowOffsetX = -5 - Смещение тени по X
ctx.shadowOffsetН = -5 - Смещение тени по Y
ctx.shadowBlur = 5 - Размытие тени
ctx.createPattern(elem, repeat) - Создает патерн elem - рисунок, видео, canvas | repeat, no-repeat repeat-x repeat-y
var linGrd = ctx.createLinearGradient(x0,y0,x1,y1) - Создает градиент от точки до точки
var radGrd = ctx.createRadialGradient(x0,y0,r0,x1,y1,r1) - Создает радиальный градиент
linGrd.addColorStop(postion,color) - Добавить цвет | position 0.0 - 1.0
ctx.drawImage(image,sX,sY,sW,sH,x,y,w,h) clip() - Делает маской нарисованную фигуру
ctx.translate(x,y); - перемещает ctx
ctx.scale(x,y); - маштабирование, множитель
ctx.rotate(angle) - Поворот ctx
ctx.transform(a,b,c,d,e,f) - Добавляется к другим трасформациям
ctx.setTrasform(a,b,c,d,e,f) - Убирает предыдущие трасформации и устанавливает эту
ctx.globalAlpha = 0.5 - Глобальная прозрачность ctx.globalCompositeOperation = "" - Вид композиции