Draw a Star or a Regular Polygon in an HTML5 canvas

by brouser

HTML

<canvas id='canvas' width='800' height='600' />

CSS

canvas {
    background-color: #333
}

JavaScript

var canv = document.getElementById('canvas');
var contx = canv.getContext('2d');
contx.clearRect(0, 0, canv.width, canv.height);

function drawShape(ctx, x, y, points, radius1, radius2, alpha0) {
    //points: number of points (or number of sides for polygons)
    //radius1: "outer" radius of the star
    //radius2: "inner" radius of the star (if equal to radius1, a polygon is drawn)
    //angle0: initial angle (clockwise), by default, stars and polygons are 'pointing' up
    var i, angle, radius;
    if (radius2 !== radius1) {
        points = 2 * points;
    }
    for (i = 0; i <= points; i++) {
        angle = i * 2 * Math.PI / points - Math.PI / 2 + alpha0;
        radius = i % 2 === 0 ? radius1 : radius2;
        ctx.lineTo(x + radius * Math.cos(angle), y + radius * Math.sin(angle));
    }
}

contx.beginPath();
drawShape(contx, 100, 100, 3, 80, 80, 0);
contx.moveTo(300, 20);
drawShape(contx, 300, 100, 3, 80, 15, 0);
contx.moveTo(500, 20);
drawShape(contx, 500, 100, 3, 80, 0, 0);
contx.moveTo(700, 180);
drawShape(contx, 700, 100, 3, 80, 80, Math.PI);

contx.moveTo(100, 220)
drawShape(contx, 100, 300, 4, 80, 80, 0);
contx.moveTo(300, 220);
drawShape(contx, 300, 300, 4, 80, 30, 0);
contx.moveTo(500, 220);
drawShape(contx, 500, 300, 4, 80, 0, 0);
contx.moveTo(756.568542, 243.4314575);
drawShape(contx, 700, 300, 4, 80, 80, Math.PI / 4);

contx.moveTo(100, 420)
drawShape(contx, 100, 500, 5, 80, 80, 0);
contx.moveTo(300, 420);
drawShape(contx, 300, 500, 5, 80, 30, 0);
contx.moveTo(500, 420);
drawShape(contx, 500, 500, 5, 80, 0, 0);
contx.moveTo(700, 580);
drawShape(contx, 700, 500, 5, 80, 80, Math.PI);

contx.strokeStyle = "#bada55";
contx.fillStyle = "#bada55";
contx.lineWidth = 2;
contx.stroke();
//contx.fill();