title: In Chrome 18Dev+. Html5 canvas 'createPattern' can't draw the image right
body: <p>This problem only happen in Chrome 18Dev+.Version 17 don't.
  The area where should be the pattern is filled with black color.</p>
  
  <p>Here's the code, you can copy it and run it in chrome:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;clock&lt;/title&gt;
      &lt;style type="text/css"&gt;
          canvas{
              display:block;
              width:400px;
              height:400px;
              border:2px solid #000;
              margin:100px auto;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id='c'&gt;&lt;/canvas&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var pic = new Image();
          $(function(){
              $(pic).load(function() {
                  var canvas = document.getElementById('c');
                  canvas.width = 400;
                  canvas.height = 400;
  
                  if (canvas.getContext) {
                      var ctx = canvas.getContext('2d');
  
                      ctx.fillStyle = ctx.createPattern(pic, 'repeat');
  
  
                      setInterval(function() {
                          ctx.clearRect(0, 0, canvas.width, canvas.height);
                          ctx.arc(canvas.width*0.5, canvas.height*0.5, 165, 0, Math.PI*2, false);
                          ctx.fill();
                      }, 1000);
                  }
              });
          });
          pic.src = 'https://www.google.com.hk/images/nav_logo105.png';
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>