Tutorial by Examples

Draw stars with flexible styling (size, colors, number-of-points). // Usage: drawStar(75,75,5,50,25,'mediumseagreen','gray',9); drawStar(150,200,8,50,25,'skyblue','gray',3); drawStar(225,75,16,50,20,'coral','transparent',0); drawStar(300,200,16,50,40,'gold','gray',3); // centerX, centerY: ...

A regular polygon has all sides equal length. // Usage: drawRegularPolygon(3,25,75,50,6,'gray','red',0); drawRegularPolygon(5,25,150,50,6,'gray','gold',0); drawRegularPolygon(6,25,225,50,6,'gray','lightblue',0); drawRegularPolygon(10,25,300,50,6,'gray','lightgreen',0); function drawRegular...

Creates a path from a set of points [{x:?,y:?},{x:?,y:?},...,{x:?,y:?}] with rounded corners of radius. If the corner angle is too small to fit the radius or the distance between corners does not allow room the corners radius is reduced to a best fit. Usage Example var triangle = [ { x: 200...