title: Creating HTML5 canvas patterns and filling stuff with them
body: <p>I'm having difficulties with <code>.createPattern(image,"repeat")</code>.</p>
  
  <ol>
  <li>Can I fill a square with my own pattern created by <code>.toDataURL()</code> and <code>.createPattern()</code>?</li>
  <li>Can I fill a square with a pattern, which is the current canvas?</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  
  context.strokeRect(0.5, 0.5, 10, 10);
  context.arc(5.5, 5.5, 3, 0, Math.PI);
  context.rect(3, 3, 1, 1);
  context.rect(7, 3, 1, 1);
  context.stroke();
  
  var img = new Image();
  img.src = canvas.toDataURL();
  context.drawImage(img, 10, 10); // works
  
  context.beginPath();
  var pattern = context.createPattern(img, "repeat"); // doesn't work
  context.fillStyle = pattern;
  context.fillRect(20, 20, 100, 100);
  context.fill();
  
  context.beginPath();
  var pattern2 = context.createPattern(canvas, "repeat"); // doesn't work
  context.fillStyle = pattern2;
  context.fillRect(120, 20, 100, 100);
  context.fill();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width="320" height="240" style="border: solid darkblue 1px;background-color: aliceblue"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>