javascriptcanvastodataurl

Blank image when executing canvas.toDataUrl()

  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);
  1. Copy the data URL and paste into this site.

enter image description here

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.

Solution

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