How to draw pentagram in HTML5 canvas

nesro.cz 2012-04-23 12:56:06 8,187 0

I wrote simple function to this magical symbol I like so much:

<!doctype html>
<html>
<body>
    <canvas id="c" width="500" height="500"></canvas>
    <script>
 
var ctx = (document.getElementById("c")).getContext("2d");
 
// draws rotated pentagram with or without cirle
function pentagram( ctx, x, y, radius, rotate, circle )
{
    ctx.beginPath();
 
    for ( var i = 0; i <= 4 * Math.PI; i += ( 4 * Math.PI ) / 5 ) {
        ctx.lineTo( x + radius * Math.cos(i + rotate), y + radius * Math.sin(i + rotate));
    }
 
    if ( circle ) {
        ctx.moveTo( x + radius, y );
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    }
 
    ctx.stroke();
}
 
pentagram ( ctx, 250, 250, 60, Math.PI/2, true);
 
        </script>
    </body>
</html>