Canvas Star

by mrienstra

HTML

<canvas id="tutorial" width="500" height="500"></canvas>

JavaScript

var starPointsOuter = [
        Math.PI *  1/10,
        Math.PI *  5/10,
        Math.PI *  9/10,
        Math.PI * 13/10,
        Math.PI * 17/10
    ];
    
    var starPointsInner = [
        Math.PI *  3/10,
        Math.PI *  7/10,
        Math.PI * 11/10,
        Math.PI * 15/10,
        Math.PI * 19/10
    ];
    
    var starRadiusInner = 40;
    var starRadiusOuter = Math.sin(Math.PI * 1/5) * starRadiusInner * Math.tan(Math.PI * 2/5) + starRadiusInner;
    
    starPoints = [
        0,
        Math.PI * 2 / 5,
        Math.PI * 4 / 5,
        Math.PI * 6 / 5,
        Math.PI * 8 / 5
    ];

    var starRadius = 100;

    var fromPolarToCoords = function (inputArray, radius) {
        var outputArray = [];
        $.each( inputArray, function (key, value) {
            var x = radius * Math.cos(value),
                y = -1 * radius * Math.sin(value);
            outputArray[key] = [x, y];
        });
        return outputArray;
    }

    starPointsOuter = fromPolarToCoords(starPointsOuter, starRadiusOuter);
    starPointsInner = fromPolarToCoords(starPointsInner, starRadiusInner);

  // get the canvas element using the DOM
  var canvas = document.getElementById('tutorial');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    // Draw shapes
    ctx.beginPath();
    ctx.translate(250, 250)

    ctx.moveTo(starPointsOuter[0][0], starPointsOuter[0][1]);
    ctx.lineTo(starPointsInner[0][0], starPointsInner[0][1]);
    ctx.lineTo(starPointsOuter[1][0], starPointsOuter[1][1]);
    ctx.lineTo(starPointsInner[1][0], starPointsInner[1][1]);
    ctx.lineTo(starPointsOuter[2][0], starPointsOuter[2][1]);
    ctx.lineTo(starPointsInner[2][0], starPointsInner[2][1]);
    ctx.lineTo(starPointsOuter[3][0], starPointsOuter[3][1]);
    ctx.lineTo(starPointsInner[3][0], starPointsInner[3][1]);
    ctx.lineTo(starPointsOuter[4][0],...