title: Adding img.crossOrigin = "*" interferes with img.complete
body: <p>I have a function that reads map tile images.  I want to keep track of whether or not a certain image has already been cached.  I'm using this function from <a href="https://stackoverflow.com/a/15352841/12010984">this thread</a>:</p>
  
  <pre class="lang-js prettyprint-override"><code>function is_cached(src) {
      var image = new Image();
      image.src = src;
  
      return image.complete;
  }
  </code></pre>
  
  <p>This was working great.  But then I needed to do some image processing.  In order to copy the image data to a canvas and process it pixel by pixel, I need to use <code>CanvasRenderingContext2D.drawImage(image, 0, 0)</code>.  But it bugs me with a cross-origin error.  So I can add a <code>image.crossOrigin = "*"</code>, which solves that problem, and I can write to a canvas and do the image processing I need.  That bit looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>  imageOutput.crossOrigin = "*"
    var demCtx;
    imageOutput.onload = function(){
      var c = document.createElement('canvas')
      c.width = c.height = 256
      demCtx = c.getContext('2d')
      demCtx.drawImage(imageOutput, 0, 0)
      var imageData = demCtx.getImageData(0, 0, 256, 256)
    }
  </code></pre>
  
  <p>The issue that arises is that every time I run the larger function which contains these two bits of code, the <code>is_cached</code> function returns false every time, except the first time.  But I know that even though <code>is_cached</code> is returning false, the images are indeed cached, as they are loading with 0 lag (as opposed to when a novel image is called and it takes a moment to grab it from the server).</p>
  
  <p><strong>Why might <code>.crossOrigin = "*"</code> be interfering with the <code>.complete</code> status of an image?</strong></p>
  
  <p>This is happening within an ObservableHQ notebook.  Might that have something to do with it?  ObservaleHQ gets weird sometimes.  </p>
  
  <h2><a href="https://observablehq.com/@slutske22/slope-as-a-function-of-latlng-in-leaflet" rel="nofollow noreferrer">ObservableHQ Notebook with the problem</a></h2>
  
  <p>You can find this code in the <code>getTileUrl</code> cell at the bottom.  This notebook is not yet finished.  You can see the cached status at the <code>Tile Previously Cached</code> line after you click around the map of submit changes to the inputs.</p>
  
  <p>Thanks for reading.</p>