Blank image when executing canvas.toDataUrl()

Question

Go to this website.
Open up the console and write:

`

var canvas = $("#mandelbox-canvas")[0];
var imgData = canvas.toDataURL("image/png").split(',')[1];
console.log(imgData);

Copy the data URL and paste into this site.

Why is the image blank? How can I fix this?

Things I have already tried:

I have tried the solution to this question. I.E. This code:

var canvas = $("#mandelbox-canvas")[0];
canvas.getContext('webgl',{preserveDrawingBuffer:true});
var imgData = canvas.toDataURL("image/png").split(',')[1];
console.log(imgData)

however the image is still blank. The image does not contain the image displayed on the canvas.

So basically, your question is how to decode a specific Base64 string? It would probably be beneficial to include the string in your question itself, rather than simply linking to an external site containing it. External sites may be malicious or flagged by filter systems; users may not be able to visit them. — Obsidian Age, Dec 17 '17 at 23:03
Possible duplicate of [toDataURL() of webgl canvas returning transparent image](https://stackoverflow.com/questions/31710748/todataurl-of-webgl-canvas-returning-transparent-image) — Endless, Dec 17 '17 at 23:12
@ObsidianAge no that is not the question. The question is, why is the image url generated transparent? — Sancarn, Dec 17 '17 at 23:27
@Endless sadly this did not do the trick, assuming I am setting the flag correctly: `canvas.getContext('webgl',{preserveDrawingBuffer:true})`. — Sancarn, Dec 17 '17 at 23:33

score 1 · Accepted Answer · answered Dec 18 '17 at 00:09

So after much trawling through StackOverflow I found the function drawScene() which (somehow?) force toDataURL() to return the image data as required:

var canvas = $("#mandelbox-canvas")[0];
drawScene()
var imgData = canvas.toDataURL("image/png").split(',')[1];
console.log(imgData)

Blank image when executing canvas.toDataUrl()

1 Answers1