title: Animate a Canvas Diamond Shape to Draw when scrolled to
body: <p>I'm attempting to draw this shape on screen with canvas.<img src="https://i.stack.imgur.com/wKvEN.jpg" alt="diamond shape"></p>
  
  <p>I have referenced this example which draws a circle: <a href="http://jsfiddle.net/loktar/uhVj6/4/" rel="nofollow noreferrer">http://jsfiddle.net/loktar/uhVj6/4/</a> ,but cannot figure it out. Any help would be greatly appreciated. I'm new to canvas.</p>
  
  <pre><code>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 &lt; endPercent) {
       requestAnimationFrame(function () {
           animate(curPerc / 100)
       });
   }
  }
  
  animate();
  </code></pre>
  
  <p>I plan on having a bullet point on each angle that would pop up and slightly pause whenever the line gets to that point.</p>