2

Why does calling toDataURL() on a canvas return a solid black image in some cases?

E.g. try this test case:

Open this URL in chrome: https://www.shadertoy.com/embed/Ms23DR

And then type in the js console:

window.open(document.getElementById("demogl").toDataURL("image/png"));

It shows a black image, why?

If you go to the non-embedded page and enter the same javascript, you get the desired image!

What causes the image to be black in the first case?

The reason why I'm asking is because I encountered this problem in my current project where I need to have a way to get the image from the canvas in a way that works in all modern browsers. I thought this way would work.

So I'd appreciate if you could tell me what causes the image to be black in the above test case.

Thanks!

Peter Foxworth
  • 73
  • 10
  • 1
    @Kaiido thanks so much, that was it! `preserveDrawingBuffer: true`. – Peter Foxworth Jan 30 '17 at 06:31
  • Glad it helped, don't hesitate to accept the dupe suggestion in this case, so it goes off of the "to-be-answered" stream. – Kaiido Jan 30 '17 at 06:32
  • How can I accept the duplicate suggestion? I don't see a button or link for that, sorry.. – Peter Foxworth Jan 30 '17 at 06:49
  • oh weird, you should have one at top of your question... – Kaiido Jan 30 '17 at 07:14
  • There is the link to the other question in a yellow box ("This question may already have an answer here:"), but I don't see a way to accept it as a duplicate.. – Peter Foxworth Jan 30 '17 at 07:27
  • I thought you should have the ["big blue button"](http://meta.stackexchange.com/questions/250922/can-we-clarify-to-the-op-that-their-question-is-not-yet-closed-and-the-duplicate/250930#250930)... Maybe a bug with new UI, maybe something I don't know. – Kaiido Jan 30 '17 at 07:36

0 Answers0