How to add an SVG file into HTML canvas element with dynamic dimensions?
<p>I'm having trouble with my web-based game. I try to draw an SVG that I've encoded into a data URL into a canvas that's supposed to have the same dimensions as the document window, even while rescaling the actual window.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
 var canvas = document.getElementById('canvas'),
  context = canvas.getContext('2d');

 // resize the canvas to fill browser window dynamically
 window.addEventListener('resize', resizeCanvas, false);

 function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  /**
   * Your drawings need to be inside this function otherwise they will be reset when 
   * you resize the browser window and the canvas goes will be cleared.
   */

  drawSVGBackground();
 }
 resizeCanvas();

 function drawSVGBackground() {
  var img = new Image();
  img.onload = function() {
   ctx.drawImage(img, 0, 0);
  };
  img.src = "data:image/svg+xml;base64,(A really long encryption that took up a lot of space)";
 }
})();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
 margin: 0;
 padding: 0;
}


/* to remove the top and left whitespace */

html,
body {
 width: 100%;
 height: 100%;
}


/* just to be sure these are full screen*/

canvas {
 display: block;
}


/* To remove the scrollbars */</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>

<p>I'm not sure if using Base64 encoding was a very good idea for this purpose, and I'm also not sure what's wrong.</p>