HTML5 canvas .toDataURL() image has no background color

Question

Problem

When using .toDataURL() method of HTML5 <canvas> element the background-color property of the element is not applied to the picture.

Question

Is this happenning because background-color is not actually a part of canvas, but a DOM styling? If so, or anything else, what can be a workaround for this?

Fiddle

Fiddle to play with here. The base64 string is logged to console.

Additional info

The canvas is created from the svg using https://code.google.com/p/canvg/

Answer 1

Other approach could be creating a dummy CANVAS and copying the original CANVAS content onto it.

//create a dummy CANVAS

destinationCanvas = document.createElement("canvas");
destinationCanvas.width = srcCanvas.width;
destinationCanvas.height = srcCanvas.height;

destCtx = destinationCanvas.getContext('2d');

//create a rectangle with the desired color
destCtx.fillStyle = "#FFFFFF";
destCtx.fillRect(0,0,srcCanvas.width,srcCanvas.height);

//draw the original canvas onto the destination canvas
destCtx.drawImage(srcCanvas, 0, 0);

//finally use the destinationCanvas.toDataURL() method to get the desired output;
destinationCanvas.toDataURL();

Answer 2

You're correct that it isn't actually a part of the image data, only a part of the styling. The easiest way around this is to just draw a rectangle before drawing the SVG:

var canvas = document.getElementById('test');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, canvas.width, canvas.height);