javascript - canvas.toDataURL results in solid black image?

Question

I have a canvas element with some doodling in it.

I am using the following to convert the canvas to a jpeg:

var data = canvas.toDataURL( "image/jpeg", 0.5 );
var img = new Image();
img.src = data;
$( "body" ).append( img );

However instead of my doodle, I get a solid black jpeg.

Can anyone tell me what I'm doing wrong?

Thanks!

Answer 1

Thats happening because the JPEG does not support a transparent background.. if you want that to be supported use png (the default extension) else you can set a non transparent fill color to the canvas using .fillStyle and .fillRect