title: html2canvas to capture morris.js charts
body: <p>I'm trying to capture a chart using html2canvas which is rendered using morris.js charts library and it gets captured but only the container.</p>
  
  <p><strong>this is the chart:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/TFWvE.png" alt="enter image description here"> </p>
  
  <p><strong>and this is what gets captured</strong>
  <img src="https://i.stack.imgur.com/xvHIk.png" alt="enter image description here"></p>
  
  <p>here is a link to an nonworking fiddle
  <a href="http://jsfiddle.net/4FMUF/" rel="nofollow noreferrer">http://jsfiddle.net/4FMUF/</a></p>
  
  <p>and here is the code:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div id="mainDiv" style=""&gt;
     &lt;div id="myfirstchart" style="height: 250px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>Morris.Bar({
    element: 'myfirstchart',
    data: [
      { y: '2006', a: 100, b: 90 },
      { y: '2007', a: 75,  b: 65 },
      { y: '2008', a: 50,  b: 40 },
      { y: '2009', a: 75,  b: 65 },
      { y: '2010', a: 50,  b: 40 },
      { y: '2011', a: 75,  b: 65 },
      { y: '2012', a: 100, b: 90 }
    ],
    xkey: 'y',
    ykeys: ['a', 'b'],
    labels: ['Series A', 'Series B']
  });
  
  setTimeout(function(){
  html2canvas($('#mainDiv'), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        }
    });
  },2000);
  </code></pre>
  
  <p>Any idea what wrong?</p>