Star-Canvas

by redky

HTML

<canvas id='stage' width='200px' height='200px'></canvas>

CSS

* {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  width: 200px; height: 200px; margin: 0 auto;
}

JavaScript

var canvas = document.querySelector('#stage');
var ctx = canvas.getContext('2d');
canvas.style.backgroundColor = '#C6E2FF';

ctx.fillStyle = 'red';
var arr = ['red', 'green', 'blue', 'yellow', 'black'];

/* star */
function drawStar(ctx, r){
  ctx.save();
  for (var i=0; i<5; i++){
    ctx.beginPath();
    ctx.moveTo(0, -r);      
    ctx.rotate(72 * 2 * Math.PI/180);
    ctx.lineTo(0, -r);
    ctx.strokeStyle = arr[i];    
    ctx.stroke();
    ctx.closePath();
  }
  ctx.restore();
}

ctx.translate(100, 100);
drawStar(ctx,50);