title: How to render a blob on a canvas element?
body: <p>How to render an image blob to a canvas element?</p>
  
  <p>So far i have these two (simplified) functions to capture an image, transform it to a blob and eventually render the blob on a canvas 
  <a href="http://codepen.io/ohavben/pen/WxRQXL?editors=1010" rel="noreferrer">in this codepen, it just returns the default black image. </a></p>
  
  <pre class="lang-js prettyprint-override"><code>var canvas = document.getElementById('canvas');
  var input = document.getElementById('input');
  var ctx = canvas.getContext('2d');
  var photo;
  
  
  function picToBlob() {
    var file = input.files[0];
  
    canvas.toBlob(function(blob) {
      var newImg = document.createElement("img"),
        url = URL.createObjectURL(blob);
  
      newImg.onload = function() {
        ctx.drawImage(this, 0, 0);
        photo = blob;
        URL.revokeObjectURL(url);
      };
  
      newImg.src = url;
    }, file.type, 0.5);
  
    canvas.renderImage(photo);
  }
  
  HTMLCanvasElement.prototype.renderImage = function(blob) {
  
    var canvas = this;
    var ctx = canvas.getContext('2d');
    var img = new Image();
  
    img.onload = function() {
      ctx.drawImage(img, 0, 0)
    }
    img.src = URL.createObjectURL(blob);
  }
  
  input.addEventListener('change', picToBlob, false);
  </code></pre>