0

GOAL

Basically what I am trying to do is:

  1. Adding multiple SVG vectors (head.svg & hand.svg)
  2. Storing them into singleton object for later use (no need to define SVG later on - it can be used directly from svg.get('name')
  3. After initial definition & storage is completed - drawing them on Canvas whenever I need to.

The main idea here is to define them once and draw them multiple times using stored SVG in singleton object.

ISSUES

  1. In Mozilla Firefox (v61.0.2) it doesn't display anything
  2. In Chrome it displays 1st SVG element (head.svg), but not the 2nd one (hand.svg)

[ UPDATE ]

After clearing cache and closing both browsers, when I reopen the project page:

  1. Mozilla Firefox shows only 2nd element (hand.svg) but not 1st one (head.svg)
  2. Chrome shows only 1st element (head.svg) but no 2nd element (head.svg)

CODE

// Game canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Canvas fullscreen
canvasFullscreen = function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // Adapt fullscreen on resize
  window.onresize = function(event) {
    canvasFullscreen();
  };
};
canvasFullscreen();


// SVG draw
var svg = new function() {
  // The list of SVGs
  this.get = {};
  
  // Create Image & add to list
  this.add = function(name, svg) {
    this.get[name] = new Image;
    this.get[name].src = svg;
  };
  
  // Draw SVG in Canvas
  this.draw = function(name, svg, x, y, w, h) {
    // Check if previously defined / added to list
    if (typeof this.get[name] == 'undefined') {
      // If SVG file defined, add it to list
      if (svg !== false) this.add(name, svg);
    }
    // Draw image
    ctx.drawImage(this.get[name], x, y, w, h);
  };
}


// Draw head
svg.draw('head', 'https://richardev.com/public/head.svg', 30, 0, 50, 50);
// Draw hand
svg.draw('left_hand', 'https://richardev.com/public/hand.svg', 0, 12.5, 25, 25);
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: none;
}

html,
body {
  overflow: hidden;
}

#window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

#canvas {
  position: relative;
  z-index: 20;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Game</title>
</head>

<body>
  <section id="window">
    <canvas id="canvas" width="800" height="600"></canvas>
  </section>
</body>

</html>

What could be the issue here? Thanks in advance!

richardev
  • 976
  • 1
  • 10
  • 33

0 Answers0