title: Why HTML5 Canvas rect / fillRect with pattern renders from canvas origin?
body: <p>I was playing around with some code recently on the canvas when I discovered this oddity.</p>
  
  <p>Given the following code</p>
  
  <pre><code>var pattern = ctx.createPattern(image, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(10, 10, 500, 500);
  </code></pre>
  
  <p>you would expect that it would render the pattern with this image <img src="https://i.stack.imgur.com/xc1o4.png" alt="pattern"> on the canvas starting at point <code>x:10, y:10</code>.</p>
  
  <p>However what actually seems to happen is that it renders the rectangle starting at <code>x:10, y:10</code> but with the pattern starting at <code>x:0, y:0</code>.</p>
  
  <p><img src="https://i.stack.imgur.com/8KxSG.jpg" alt="offset illustration"></p>
  
  <p>The fix is the translate the canvas</p>
  
  <pre><code>ctx.translate(10,10);
  </code></pre>
  
  <p>and then render the rectangle starting from <code>x:0, y:0</code></p>
  
  <pre><code>ctx.fillRect(0, 0, 500, 500);
  </code></pre>
  
  <p>I have set up a demo at <a href="http://jsfiddle.net/HaykoKoryun/6V8jL/" rel="nofollow noreferrer">jsfiddle</a> to illustrate the issue. Just change the x and y offsets to see what happens by default and then use the checkbox to enable translation to 'fix' the issue.</p>
  
  <p>So my questions is this:</p>
  
  <p><em>Why</em> is the behaviour of <code>rect</code> and <code>fillRect</code> this way when it comes to filling with patterns considering most of the time it is counter intuitive?</p>