Offscreen parts on scrollable page are black

[nosbabananos]

Hi everyone,

I'm developing angular.js app which is using chart.js for charts and I need to export charts to image.

I use html2canvas on a div which contains charts and it works fine for me when all of the charts are visible within a window. But, when charts cannot fit on a window, offscreen parts of div are black after in an image file. I googled and googled and I can find a solution. Any sugestion?

[dhustlerz]

Hi ,
I have the similar issue .
+1

[ufologist]

I have the similar issue too, and I found a way to fix it.
Please see example below, perhaps help you.

html2canvas snapshot invisible DOM in a scrollable div
html2canvas-snapshot-invisible.html

blog: fix html2canvas snapshot invisible DOM Chinese

[Chima1707]

@ufologist, dont you have an English version of your block?

[shohoku11wrj]

This thread has two solutions: 1. fix source code; 2. workaround without touching source. #461

[kkxlkkxllb]

      $el = $htmlEl.clone().css
        position: 'fixed'
        top: 0
        left: 0
        padding: 0
        height: 'auto'
      $el.appendTo $('body')
      ow = $htmlEl[0].clientWidth
      w = $el[0].clientWidth
      if w > ow
        w = ow
        $el.css
          width: w
      h = $el[0].clientHeight
      html2canvas $el

clone your element to body, set some css to calculate width and height

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[no-response]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.