How to add an SVG file into HTML canvas element with dynamic dimensions?

Question

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.

(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)";
 }
})();

* {
 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 */

<canvas id="canvas"></canvas>

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.

Sidenote: Last time I checked, firefox didn't scale SVG properly in the canvas. Perhaps this was fixed, make sure to test with multiple browsers. — Domino, Sep 15 '16 at 02:39
@JacqueGoupil, width and height attributes should be set to absolute length (i.e no %) or FF won't draw it at all, and actually only chrome will try to make a guess. Otherwise, I never seen that FF didn't scaled correctly svg when used with `drawImage()` — Kaiido, Sep 15 '16 at 06:34

score 2 · Answer 1 · edited May 23 '17 at 11:51

Firstly, SVG's can be data url encoded.

Secondly, Learn how to debug JavaScript

Thirdly, I refactored/fixed your JavaScript:

(function() {
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        img = new Image();

    // 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() {
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
    }


    img.onload = function() {
        drawSVGBackground();
    };
    img.src = "data:image/svg+xml;base64,(A really long encryption that took up a lot of space)";
})();

score 0 · Answer 2 · answered Sep 21 '19 at 16:20

You probably copy-pasted code from different sources so the variable names are not consistent.

context = canvas.getContext('2d');

is defined,

however you refer to the context later on as:

ctx.drawImage(img, 0, 0);

ctx is not defined.

try:

context.drawImage(img, 0, 0);

How to add an SVG file into HTML canvas element with dynamic dimensions?

2 Answers2