javascript - Animate a Canvas Diamond Shape to Draw when scrolled to -

i'm attempting draw shape on screen canvas.

i have referenced example draws circle: http://jsfiddle.net/loktar/uhvj6/4/ ,but cannot figure out. appreciated. i'm new canvas.

var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var endpercent = 85; var curperc = 0; var counterclockwise = false; var circ = math.pi * 2; var quart = math.pi / 2;  context.linewidth = 10; context.strokestyle = '#ad2323'; context.shadowoffsetx = 0; context.shadowoffsety = 0; context.shadowblur = 10; context.shadowcolor = '#656565';   function animate(current) {  context.clearrect(0, 0, canvas.width, canvas.height);  context.beginpath();  context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);  context.stroke();  curperc++;  if (curperc < endpercent) {      requestanimationframe(function () {          animate(curperc / 100)      });  } }  animate(); 

i plan on having bullet point on each angle pop , pause whenever line gets point.