title: Canvas & Resemble.js: toDataURL() Not Working
body: <p>I have an html5 video that I am taking screenshots from using: </p>
  
  <pre><code>context.drawImage(video, 0, 0, w, h);
  </code></pre>
  
  <p>This draws the screenshot on the canvas just fine. However, what I am trying to do is take multiple screenshots on multiple canvas and compare them with each other using <a href="http://huddle.github.io/Resemble.js/" rel="nofollow">Resemble.js</a>.</p>
  
  <p>Resemble.js requires two files, and I am trying to use toDataURL() to get these files from the canvases.</p>
  
  <pre><code>var image1 = new Image();
          image1.id = "pic"
          image1.src = canvas1.toDataURL("image/png");
  </code></pre>
  
  <p>And then plugging the images into resemble:</p>
  
  <pre><code>resemble(image1).compareTo(image2).onComplete(function(){
              //return data;
              alert(data);
          /*
          {
            misMatchPercentage : 100, // %
            isSameDimensions: true, // or false
            getImageDataUrl: function(){}
          }
          */
              });
  </code></pre>
  
  <p>Where this seems to fail for me is toDataURL(). It does not produce anything from the canvas. What is causing this issue? And am I on the right track with my approach?</p>