title: HTML5 Drawing with canvas, rotate line?
body: <p>Working on an open source project that we have HTML5 canvas rotation working for images and text - but I can't figure out what is different about shapes.</p>
  
  <p>Source file: <a href="https://github.com/kageurufu/FaceMaker/blob/master/js/facemaker.render.js" rel="nofollow">https://github.com/kageurufu/FaceMaker/blob/master/js/facemaker.render.js</a></p>
  
  <p>Line 239:</p>
  
  <pre><code>  case FM.ShapeTypes.square:
    case FM.ShapeTypes.line:
      //As far as I can tell, a line is just a rect, and a square is really a rect
      if (layer.shape_opt === 0) {
        c.fillRect(x, y, fm.parseInt(layer.width), fm.parseInt(layer.height));
      } else {
        c.strokeRect(x, y, fm.parseInt(layer.width), fm.parseInt(layer.height));
      }
  </code></pre>
  
  <p>This works, to draw a dynamic line width the provided variables: x,y,width,height.</p>
  
  <p>However, we have a rotation variable that is 0..360 and if > 0 it needs to be applied.  For images and fonts, we rotate the canvas like this at line 298:</p>
  
  <pre><code>c.save();
  c.translate(x, y);
  c.rotate(rotation * (Math.PI / 180));
  // draw here
  c.restore();
  </code></pre>
  
  <p>However... I can't figure out how to do this with lines.  I've read the other related questions here - but not understanding how to adjust the origin of a shape.</p>