html2canvas not work when the html contains a canvas element

I have the same problem.

Could you share an example on jsfiddle?

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

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 :)

problem is in removing container form DOM before rendering

I have the same problem. marker...

Maybe html2canvas can not work with gridstack.js

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

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.

@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.

same problem,Firefox is ok but Chorme can not work

@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.

@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

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

Thanks @IxAres, it solves my problem.

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

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

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

hey,what solution?

2020 the problem is still here.

+1 I'm also seeing this behaviour.

Problem still exists

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

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.

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

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 :)

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:

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

Question: have you noticed a performance impact?

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