Edit in JSFiddle

var c = document.createElement( 'canvas' ),
    cx = c.getContext( '2d' ),
    angle = 0;
document.body.appendChild( c );
c.width = c.height = 400;
cx.lineWidth = 3;
cx.translate( 200, 200 );
for ( angle = 0; angle <= 360; angle += 18 ) {
  cx.save();
  cx.rotate( angle * Math.PI/180 );
  cx.moveTo( 0, 0 );
  cx.lineTo( -30, -200 );
  cx.quadraticCurveTo( 0, -170, 30, -200 )
  cx.lineTo( 0, 0 );
  cx.moveTo( -25, -160 );
  cx.quadraticCurveTo( 0, -140, 25, -160 )
  cx.moveTo( -18, -120 );
  cx.quadraticCurveTo( 0, -100, 18, -120 )
  cx.moveTo( -12, -80 );
  cx.quadraticCurveTo( 0, -60, 12, -80 )
  cx.moveTo( -6, -40 );
  cx.quadraticCurveTo( 0, -20, 6, -40 )
  cx.restore();
}
cx.stroke();