title: How to get image from slice image loaded on canvas?
body: <p>I have the next code which slice an image. I have the next HTML code</p>
  
  <pre><code>&lt;img id="imagen" src="original.png" &gt;
  &lt;canvas id="myCanvas" width="150" height="600"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>jQuery code</p>
  
  <pre><code>$(document).ready(function() {
     var image = document.getElementById('imagen');
     var canvas = document.getElementById('myCanvas');
     var ctx = canvas.getContext('2d');
  
     image.onload = function() {
        ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height);
     };
  
     var i = canvas.toDataURL('image/jpeg');
     console.log( i );
  });
  </code></pre>
  
  <p>Now when I tried to get the sliced part, which is store on the <code>canvas</code> variable when I check the <code>i</code> I get an black image.
  Someone can tell me why this happened and how to solve it? 
  Thanks.</p>