I'm struggling with implementing an SVG into my web-based game. I am attempting to draw the SVG, which has been encoded into a data URL, onto a canvas that should match the dimensions of the document window even when the window is resized.
(function() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
// dynamically resize the canvas to fill browser window
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
/**
* It's important to keep your drawings within this function to prevent them from being cleared when
* the browser window is resized.
*/
drawSVGBackground();
}
resizeCanvas();
function drawSVGBackground() {
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "data:image/svg+xml;base64,(A very lengthy encryption)";
}
})();* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
canvas {
display: block;
}
<canvas id="canvas"></canvas>I'm questioning whether using Base64 encoding was the best approach for this task and experiencing issues that I can't seem to pinpoint.