circles and polygons

circle(sX, sY, radx, rady, c1, c2);

A function for drawing circles is technically redundant, as HTML Canvas has a built-in circle method, but knowing how to utilize parametric equations to draw a circle is important because many other shapes and curves can be created by modifying these equations.

function circle(sX, sY, radx, rady){ 
ctx.beginPath(); 
ctx.moveTo(sX+radx, sY);
for (var i = 0; i < 361; i++){
 var posX = sX + radxMath.cos(i(Math.PI/180));
 var posY = sY + radyMath.sin(i(Math.PI/180));
 ctx.lineTo(posX, posY);
 }
}

polygon(angle, rota, sX, sY, rad, c1, c2); 

Angular shapes can be drawn using modified parametric circle equations.

function polygon(sX, sY, radx, angle, rota) { 
ctx.beginPath();
 for (var i = rota; i < 360+rota; i+=angle){
   var shapeX = sX+(radMath.cos(i(Math.PI/180))); 
   var shapeY = sY+(radMath.sin(i(Math.PI/180))); 
   ctx.lineTo(shapeX, shapeY);
 } 
ctx.closePath(); 
ctx.stroke();
 }
  • sX — center of the shape, X position
  • sY — center of the shape, Y position
  • rad — radius of the shape
  • angle — angle subtended from center of the shape. For reference consider the following:
    • If angle is 120, a triangle will be drawn.
    • If angle is 90, a square will be drawn.
    • If angle is 72, a pentagon will be drawn.
    • If angle is 60, a hexagon will be drawn.
    • If angle is 51+(3/7), a heptagon will be drawn.
    • If angle is 45, an octagon will be drawn.
    • If angle is 40, an enneagon will be drawn.
  • rota — rotation of shape. Technically, this number determines where the shape begins, that is, where the first point of the shape will be drawn. Any number may be used, but for reference consider:
    • If rota is 0, the first point will be drawn to the right of the radius start position.
    • If rota is 90, the first point will be drawn to the bottom of the radius start position.
    • If rota is 180, the first point will be drawn to the left of the radius start position.
    • If rota is 270, the first point will be drawn to the top of the radius start position. 

star (vari, sX, sY, rad, c1, c2); //12 variations

concentPoly(angle, rota, incr, sX, sY, rad, c1, c2);

circledPoly(angle, rota, sX, sY, rad, c1, c2); 

polyCircle(angle, rota, sX, sY, rad, c1, c2);

radpoly(sX, sY, rad, sides, rota, incr, c2);