sample canvas drawStar

HTML

<canvas id="ctx" width="500" height="500"></canvas>
<h2>Demo created by Programming Thomas</h2>

JavaScript

var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "lightgreen";
star(ctx, 250, 250, 225, 3, 0.8);
function star(c, x, y, r, p, m)
{
	ctx.save();
	ctx.beginPath();
	ctx.translate(x, y);
	ctx.moveTo(0,0-r);
	for (var i = 0; i < p; i++)
	{
		ctx.rotate(Math.PI / p);
		ctx.lineTo(0, 0 - (r*m));
		ctx.rotate(Math.PI / p);
		ctx.lineTo(0, 0 - r);
	}
	ctx.fill();
	ctx.restore();
}
// Flavor #2
// Draw a star. This function just does does the lineTo's. It is up to the caller
    // to set the fillStyle and/or strokeStyle on the context, and call fill() or stroke()
    // after this function returns.
    // context     - The HTML5 canvas' context, obtained with getContext("2d").
    // xCenter     - The x coordinate of the center of the star, in the context.
    // yCenter     - The y coordinate of the center of the star, in the context.
    // nPoints     - The number of points the start should have.
    // outerRadius - The radius of a circle that would tightly fit the star's outer vertexes.
    // innerRadius - The radius of a circle that would tightly fit the star's inner vertexes.
    function drawStar(context, xCenter, yCenter, nPoints, outerRadius, innerRadius) {
        ctx.beginPath();
        for (var ixVertex = 0; ixVertex <= 2 * nPoints; ++ixVertex) {
            var angle = ixVertex * Math.PI / nPoints - Math.PI / 2;
            var radius = ixVertex % 2 == 0 ? outerRadius : innerRadius;
            context.lineTo(xCenter + radius * Math.cos(angle), yCenter + radius * Math.sin(angle));
        }
    }