title: Canvas drawImage throws INDEX_SIZE_ERR when run locally, but not from the web
body: <p>I'm running through the MDN tutorials, using the <a href="https://developer.mozilla.org/samples/canvas-tutorial/3_3_canvas_drawimage.html" rel="nofollow">drawImage method for slicing an image</a>.  The stripped down page code looks like:</p>
  
  <pre><code>  &lt;html&gt;
    &lt;head&gt;
      &lt;script type="application/x-javascript"&gt;
      function draw() {
             var ctx = document.getElementById('canvas').getContext('2d');
             ctx.drawImage(document.getElementById('frame'),0,0);
             ctx.drawImage(document.getElementById('source'),33,71,104,124,21,20,87,104);
      }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="draw();"&gt;
        &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
        &lt;img id="source" src="images/rhino.jpg" width="300" height="227" alt=""&gt;
        &lt;img id="frame" src="images/picture_frame.png" width="132" height="150" alt=""&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When the full version is run from the MDN website, it works as expected.  When copied to my local machine and loaded from a "file:///" url (with correct relative pathing for images), this throws an INDEX_SIZE_ERR on the drawImage...'source' line.</p>
  
  <p>Images load as expected through the img tags.</p>
  
  <p>Assigning the <code>document.getElementById('source')</code> to a variable and passing that variable to <code>drawImage</code> shows that the variable is non-null and has classWidth of 300 (through a simple <code>alert</code>), and still throws the error.</p>
  
  <p>The <code>ctx.drawImage(document.getElementById('frame'),0,0);</code> line does draw to the canvas correctly.</p>
  
  <p><strong>Why is my local machine behaving differently than the web version?</strong>  Security restrictions?  (Newbie here, apologies if the answer is simple.)</p>