Blank image when executing canvas.toDataUrl()

Question

1. Go to this website .

2. Open up the console and write:

`

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

3. 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 . IE 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.

Answer 1

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)