Canvas Draw Hexi Ring SRC

<canvas id="canvas" width="400" height="400"></canvas>
<script>
  var canvas = document.querySelector('#canvas').getContext('2d'),side = 0,
    size = 100,
    x = 100,
    y = 100;

canvas.beginPath();
canvas.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));

for (side; side < 12+1; side++) {
  canvas.lineTo(x + size * Math.cos(side * 4 * Math.PI / 12), y + size * Math.sin(side * 4 * Math.PI / 12));
}

canvas.fillStyle = "#FFF333";
canvas.stroke();
</script>