title: How can I rotate a segment of <canvas>, not the entire element?
body: <p>I'm trying to learn some of the <code>&lt;canvas&gt;</code> API right now. I've tasked myself with creating a simple analog style clock with working clock hands (second, minute and hour).</p>
  
  <p>The clock frame, face and hands are all drawn with the same canvas element. I've created a <code>drawScene()</code> function which runs every second and redraws the entire clock. If you want to look more in-depth at the code I will post it into a jsbin linked at the bottom of this post.</p>
  
  <p>The goal is for the <code>drawScene()</code> method to call the <code>drawClockFace()</code> method, which passes the current second / minute / hour to individual functions that draw the hand based on the passed in time (ie <code>drawSecondHand(currentSecond)</code>).</p>
  
  <p><strong>question</strong>:</p>
  
  <p>how do I rotate individual components of a canvas (ie the second hand on my clock) without rotating the entire canvas? I know I need to calculate where to draw the line from the center origin out, based on what the current second is. I'm just not sure the gemoetric calculation needed to determined "where" to draw the line. </p>
  
  <p>Here's what I have so far -- note it's not super clean because I've been putzing with it.
  <a href="http://codepen.io/tconroy/pen/BcEbf" rel="nofollow">http://codepen.io/tconroy/pen/BcEbf</a></p>