html2canvas not work when the html contains a canvas element

[mengwuhen]

Bug reports:

I am using html2canvas in a react Project. I found that html2canvas not work when the html contains a canvas element. The canvas area will show empty.

Specifications:

this is the html picture

this is the convert to canvas picture

in the canvas area , I use 'echarts-for-react' to draw a Radar map。But when I clcik Generate pictures Button ， the dowload picture is not complete

• html2canvas version tested with: 1.0.0-alpha.4
• Browser & version: Chrome 60.0.3112.7
• Operating system: windows

[bigfacewo]

I have the same problem.

[niklasvh]

Could you share an example on jsfiddle?

[outerbound]

same problem. i have chartjs graphs on page, they are no longer rendering. used to render in previous version

[outerbound]

I have created a fiddle to show the problem
https://jsfiddle.net/outerbound/v7p71wzr/

This is not working on chrome :( , I can confirm on safari it working :)

[ZeroGravity100500]

problem is in removing container form DOM before rendering

[JasonDung]

I have the same problem. marker...

[bigfacewo]

Maybe html2canvas can not work with gridstack.js

[enanchen]

Had the same problem with using chart.js with vue(vue-chart.js) and it only happens in Chrome

[wangyunzhu]

I have the same problem, html2canvas can not work with gridstack.js, when i use html2canvans with gridstack, all elements get stacked at the top.

[bigfacewo]

@Nemo0915 I build a jsfiddle with gridstack.js, but it's work fine.So maybe that is not gridstack.js's problem,but i am not very sure.

[ArrayZheng]

same problem,Firefox is ok but Chorme can not work

[wangyunzhu]

@bigfacewo thanks for your reply,it's the screenshot of your jsfiddle, the button has been stacked to the top too, and the result is same whether in FF or Chrome.

[bigfacewo]

@Nemo0915 I found the 0.5.0-beta4 version work normal,jsfiddle. the screenshot is:

The 1.0.0-alpha4 version,jsfiddle,it's can not work on chrome, But i didn't find the problem that the elements were stacked on the top. this is the screenshot on Firefox:

Chrome version:63.0.3239.108
Firefox version:57.0.2

[IxAres]

you can add option: removeContainer: false to fixed this problem temporarily....

[enanchen]

Thanks @IxAres, it solves my problem.

[niklasvh]

Fixed in https://github.com/niklasvh/html2canvas/commit/38749bc4b6a861f778a915491fc7d84fea6e1a2f

[omeriko]

i've tried adding removeContainer: false, but the problem still exists on mobile Chrome

[nehachaudhary]

@niklasvh it doesn't work at all. I am using version 1.0.0-rc.5 of this application.

[steele-cjf]

hey,what solution?

[MrG2333]

2020 the problem is still here.

[nwoodhouse]

+1 I'm also seeing this behaviour.

[IAmRC1]

Problem still exists

[g0d0]

Problem still exists with Chart.js and Firefox 76.0 (64-bit) browser

[Rajeshgtstpl]

Hey there I am getting the same issue with Mapbox inside the element can you please help here.
I have also tried removeContainer: false but it didn't work for me.

[AchoArnold]

@Rajeshgtstpl I had a similar issue with mapbox. I solved it by setting preserveDrawingBuffer: true in the mapbox options.

[andreassoegaard]

I'm not using Chart.js, but had the same problem with canvases where i used drawImage. Solved the issue by putting image.crossOrigin = 'anonymous' on the image element before passing it to drawImage, like this:

image.crossOrigin = 'anonymous'

Hope it can help someone :)

[tejasdotchavan]

Hi guys, I am having similar canvas export issue but with a threejs scene, any recommendations? I have tried with the v1.0.0-rc.7 but it exports everything but the threejs canvas.

EDIT: I tried to add in the threejs canvas like this:

But got this error:

[jimmyangel]

@AchoArnold preserveDrawingBuffer: true worked for me for Mapbox, thanks.

Question: have you noticed a performance impact?

[Nurbek0525]

I'm not using Chart.js, but had the same problem with canvases where i used drawImage. Solved the issue by putting image.crossOrigin = 'anonymous' on the image element before passing it to drawImage, like this:

image.crossOrigin = 'anonymous'

Hope it can help someone :)

it saved my life thanks