title: How to check, if a canvas element has been tainted?
body: <p><strong>Basic scenario</strong></p>
  
  <p>I'm loading several images on the client side. Some of them are from another domain, some are not. Some I may be able to access using the <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes" rel="noreferrer"><code>crossOrigin</code> attribute</a>, some not.</p>
  
  <p>The basic requirement is to retrieve a <a href="https://developer.mozilla.org/en-US/docs/data_URIs" rel="noreferrer">dataURL</a> for the images where possible.</p>
  
  <p><strong>Question</strong></p>
  
  <p>After drawing the image to the canvas element (which I need to to to get a dataURL, right?), <em>how can I check, without a <code>try ... catch</code> block, whether the canvas has been tainted</em>? If the canvas is tainted, I can't use <code>toDataURL()</code> anymore (<a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="noreferrer">see MDN</a>).</p>
  
  <pre><code>var image = new Image(),
      canvas = document.createElement( 'canvas' ),
      context = canvas.getContext( '2d' );
  
  image.onload = function(){
  
    // adjust dimensions of canvas
    canvas.width = image.width;
    canvas.height = image.height;
  
    // insert image
    context.drawImage( image, 0, 0 );
  
    // how to check here?
  
    // get dataurl
    dataurl = tmpCanvas.toDataURL();
  
    // do stuff with the dataurl
  };
  image.src = src;  // some cross origin image
  </code></pre>