Using css in converted svg to img

I am trying to convert an svg to an image format. Actually a lot works very fine and I know how to convert from SVG to canvas and from canvas to img. My problem is that the svg uses css that has been included as css file and by converting to canvas, the styles will be lost.

Does anyone has an idea how to copy the styles into my svg or canvas?

Here is my code: https://jsfiddle.net/DaWa/70w9db1d/

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>SVG2IMG</title>
    <link rel="stylesheet" href="./circle.css">
</head>
<body>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40"/>
</svg>

<script>
  var svg = document.querySelector('svg');

  let xml  = new XMLSerializer().serializeToString(svg);
  let data = "data:image/svg+xml;base64," + btoa(xml);
  let img  = new Image();
  img.src  = data;
  document.body.appendChild(img)

</script>

</body>
</html>

And my css:

circle {
    fill:red
}