Стандартные фигуры

Пример стандартных фигур.

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

// 1. круг
ctx.beginPath();
ctx.arc(35, 35, 25, 0, Math.PI*2); // arc(x, y, radius, startAngle, endAngle);
ctx.fillStyle = "#800";
ctx.closePath();
ctx.fill();

// 2. квадрат
ctx.beginPath();
ctx.rect(75, 10, 50, 50); // rect(x, y, width, height)
ctx.fillStyle = "green";
ctx.closePath();
ctx.fill();

// 3. квадрат без заливки
ctx.beginPath();
ctx.rect(145, 10, 50, 50);
ctx.strokeStyle = "navy";
ctx.closePath();
ctx.stroke();

// 4. Закруглённый квадрат
ctx.beginPath();
ctx.fillStyle = "green";
ctx.rect(215, 15, 40, 40);
ctx.lineJoin = "round"; // сделать углы рамок закруглёнными
ctx.lineWidth = 10; // толщина рамок
ctx.strokeStyle = "green"; // цвет рамок
ctx.stroke(); // нарисовать рамку
ctx.closePath();
ctx.fill();

Пример на JSFiddle

Метод beginPath() начинает отрисовку новой фигуры, уже не затрагивая предыдущие.

Например, если в коде выше не было метода beginPath(), то круг и квадрат стали бы зелёным цветом, хотя ожидается, что зелёным станет только квадрат. Это из-за того, что при заливке квадрата зелёным цветом, для программы круг и квадрат, без метода beginPath(), будут представляться как одна фигура.

Также стоит обратить внимание на фигуру «Закруглённый квадрат». В Canvas нет такой фигуры, как закруглённый квадрат, поэтому рисуется обычный квадрат, поверх которой находится рамка, углы которой имеют закруглённую форму.

Canvas SVG Raphaël