title: Proper way to check for image and video load failures in Javascript?
body: <p>A common example of loading an image in JS to draw onto an HTML5 canvas is:</p>
  
  <pre><code>var canvas = $("#mycanvas")[0];
  var context = canvas.getContext("2d");
  var img = new Image();
  img.src = 'URL HERE';
  img.onload = function() {
      context.drawImage(img, 0, 0);
  };
  </code></pre>
  
  <p><strong>BUT how do we handle the case where the image failed to load?</strong></p>
  
  <p>e.g. when loading JSON data with JQuery there's a <code>.fail</code> method for handling load failures:</p>
  
  <pre><code>$.getJSON(url)
      .done(function(data, statusText, jqXHR) {
          // data loaded ok
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
          // error loading data - ERROR HANDLING HERE
      })
  ;
  </code></pre>
  
  <p>Great, but is there some equivalent in JS for handling image loading errors?
  Is there some other event similar to <strong><code>.onload</code></strong> but which triggers on <strong>failure to load</strong>? Or does <code>.onload</code> trigger in either case?</p>
  
  <p>Similar problem when loading a video into a video tag:</p>
  
  <pre><code>var videoElement = $("#myvideo")[0];
  $("#mvideo").append("&lt;source src='URL HERE' type='TYPE STRING HERE'&gt;");
  videoElement.load();
  videoElement.play();
  </code></pre>
  
  <p>i.e.  <strong>how to we detect a load failure</strong> so we can add error handling code?</p>