title: Moving a shadow around a circle
body: <p>I have a circle which orbits every 10 seconds. And i am trying to cast a shadow which is angled towards the orbit origin (the light source) whilst also taking into account the camera angle as well.</p>
  
  <p>The shadow works for some angles but as the camera goes more edge on or more top down, it starts to look less accurate and I have no idea how to correct for it - it seems like a complicated math issue that I am struggling to figure out how to solve.</p>
  
  <p>This is the animation: <strong><a href="http://jsfiddle.net/8y2bm88w/">http://jsfiddle.net/8y2bm88w/</a></strong></p>
  
  <p>And my draw code for the shadow:</p>
  
  <pre><code>ctx.beginPath();
  
  //rotate shadow with the planet
  ctx.translate(originX + obj[i].x, originY + obj[i].y);
  ctx.rotate(obj[i].angle); //rotate around origin
  ctx.translate(-(originX + obj[i].x), -(originY + obj[i].y));
  
  
  var offsetX = -(10 * Math.sin(obj[0].angle)); //i feel this is the issue
  var offsetY = 0; //this too
  
  ctx.rect(originX + obj[i].x + offsetX, originY + obj[i].y + offsetY - 10, 20, 20);
  ctx.fillStyle = 'rgba(213,0,0,0.9)'; //red shadow - easier to see
  ctx.fill();
  </code></pre>
  
  <p>The code makes more sense via the JSFiddle as it puts the code into more context.</p>
  
  <p>So i think this is to do with the maths for <code>offsetX</code> and <code>offsetY</code> variables, as the user changes the camera angle the offset's need to accommodate and change the way in which the shadow moves. But, this is really confusing how to solve.</p>