javascript - How to get background color of SVG converted properly into Canvas

Question

Im converting a d3 svg object with use of canvg library to an canvas and display it as an image (png).

The resulting image has a transparent background, which is not what I want. I need this with a white background.

So i tried to set the background color of svg element. When viewing svg element it is fine, but the converted image is still transparent. I also tried, to alter background of the canvas object, but this is also not working.

first approach (svg):

var svg = d3.select(".chart").append("svg").attr("style","background: white;")...

second aproach (canvas):

canvg(document.getElementById('canvas'), $("#chart").html());

var canvas = document.getElementById('canvas');
canvas.style.background = 'white';
var img = canvas.toDataURL('image/png');
document.write('<img src="' + img + '"/>');  

Does anyone know, on which object I have to set the background color, in order to get it converted properly in png image ?

Edit: With the information mentioned in ThisOneGuys answers, I found this solution.

var svg = d3.select(".chart").append("svg") ...

svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "white"); 

With the appended rect, I get what I need :)

Answer 1

To append a <rect> is one solution, an other solution is to render the background color after you've called `canvg' method.

You can call every drawing operations from the canvas API to draw on your rasterized version so, it's possible to fill the background using ctx.fillRect. To make the new drawings appear in the background, you just have to set the globalCompositeOperation property to destination-over.

var $container = $('#svg-container'),
      content = $container.html().trim(),
      canvas = document.getElementById('svg-canvas');

     // Since we will edit the canvas afterward, we need to remove that #!~$^ default mouseEvent listener
    canvg(canvas, content, {ignoreMouse: true});
     // now you've rendered your svg, you can draw the background on the canvas
    var ctx = canvas.getContext('2d');

     // all drawings will be made behind the already painted pixels
    ctx.globalCompositeOperation = 'destination-over'
      // set the color
    ctx.fillStyle = $container.find('svg').css('background-color');
     // draw the background
    ctx.fillRect(0, 0, canvas.width, canvas.height);


    var theImage = canvas.toDataURL('image/png');
    $('#svg-img').attr('src', theImage);

svg {
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<section>
  <header>
    <h1>SVG:</h1>
  </header>
  <div id='svg-container'>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="60" cy="70" r=50 style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
    </svg>
  </div>
</section>
<section>
  <header>
    <h1>Canvas:</h1>
  </header>
  <canvas id="svg-canvas"></canvas>
</section>
<section>
  <header>
    <h1>PNG:</h1>
  </header>
  <img id="svg-img" />
</section>