Между вызовами методов beginPath() и closePath() находятся методы создающие различные участки пути.
Если нам не надо замыкание пути, то мы можем удалить вызов метода context.closePath():
Метод rect() создает прямоугольник.
А метод fill() заливает цветом:
Метод clip() позволяет вырезать из canvas определенную область
Теперь применим метод clip() для ограничения области рисования только первым прямоугольником:
Метод arc() добавляет к пути участок окружности или арку.
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Здесь используются следующие параметры:
x и y: x- и y-координаты начала арки
radius: радиус арки
startAngle и endAngle: начальный и конечный угол в радианах,
Полный круг - Math.PI * 2
anticlockwise: направление движения:
true - против часовой стрелки,
false - по часовой стрелке.
Метод arcTo() также рисует дугу.
Он имеет следующее определение:
arcTo(x1, y1, x2, y2, radius)
Метод quadraticCurveTo() создает квадратичную кривую:
quadraticCurveTo(x1, y1, x2, y2)
Метод bezierCurveTo() рисует кривую Безье:
bezierCurveTo(x1, y1, x2, y2, x3, y3)
нарисуем более сложную двухмерную сцену