Polygons

The drawPolygon() method creates a regular (equal-angled) polygon.

// Draw a triangle
$('canvas').drawPolygon({
strokeStyle: 'black',
strokeWidth: 4,
x: 200, y: 100,
radius: 50, sides: 3
});

// Draw a polygon
$('canvas').drawPolygon({
fillStyle: '#589',
strokeStyle: '#000',
x: 100, y: 100,
radius: 50, sides: 5,
rotate: 25
});

Concave Polygons

To create concave polygons (polygons that point inward), include the concavity property.

A value greater than 0 will cause the sides to point inward.
A value less than 0 will cause the sides to point outward.
A value equal to 0 does not project at all.
A value of 1 will render the polygon invisible, because the sides will point in completely.

// Draw a star
$('canvas').drawPolygon({
fillStyle: '#36c',
x: 100, y: 100,
radius: 50, sides: 5,
concavity: 0.5
});

// Draw a badge-like shape
$('canvas').drawPolygon({
fillStyle: '#3c6',
strokeStyle: '#083',
x: 100, y: 100,
radius: 50, sides: 50,
concavity: 0.1
});

// Draw a shield-like shape
$('canvas').drawPolygon({
fillStyle: '#36c',
strokeStyle: '#f60',
strokeWidth: 5,
x: 100, y: 100,
radius: 50, sides: 3,
concavity: -0.5,
rotate: 180
});

Fish Ladybug Water