title: Gradient fill relative to shape position, not canvas position?
body: <p>As I understand it, gradient fills must be specified relative to the canvas element itself (i.e. 0, 0) rather than relative to the shape you're actually filling.</p>
  
  <p>Question: <strong>am I right in this assertion, and is there a suggested way around it?</strong></p>
  
  <p>For example (<a href="http://jsfiddle.net/MYFxf/3/" rel="nofollow">JSFiddle here</a>):</p>
  
  <pre><code>    ctx.beginPath();
      ctx.rect(40, 50, 100, 70);
      var grd = ctx.createLinearGradient(0, 50, 0, 120);
      grd.addColorStop(0, "red");
      grd.addColorStop(1, "blue");
      ctx.fillStyle = grd;
      ctx.fill();
  </code></pre>
  
  <p>There, I make a rectangle. I expected that, to fill it with a gradient starting from the top left of the shape, I would pass <code>0, 0</code> as the first two params. It seems I must pass instead the X/Y coordinates of the rectangle relative to the canvas.</p>
  
  <p>This becomes an issue if, say, you have an arc built with a quadratic curve, since, without being a Maths genius, you don't know the top position of the curve - only the control point.</p>