Only last image gets drawn on canvas in a loop

Question

I wonder why only the last SVG gets drawn onto these dynamically created canvases. (Another matter is that none is drawn in Firefox - only Chrome and Safari tested positive for that so far).

Det plan is to - in the loop - replace string parts of the inline SVG markup to display the SVG graphics in different colors on the different canvases.

I cannot get it why only the last one gets drawn onto its canvas.

var colorCombis = {
  "26bdfcfc643e": {
    "colors": ["26bdfc", "fc643e"]
  },
  "de7d1f0948b2": {
    "colors": ["de7d1f", "0948b2"]
  },
  "4e6a8e7e5252": {
    "colors": ["4e6a8e", "7e5252"]
  },
  "fc643e26bdfc": {
    "colors": ["fc643e", "26bdfc"]
  }
}

var svgHTML = document.getElementById("svgpic");
var bBox = svgHTML.getBBox();
var gallery = document.getElementById("canvasGallery");
for (var key in colorCombis) {

  colorCombis[key].canv = document.createElement("canvas");

  colorCombis[key].canv.id = key;
  colorCombis[key].canv.width = Math.floor(bBox.width * 3);
  colorCombis[key].canv.height = Math.floor(bBox.height * 3);
  colorCombis[key].canv.setAttribute("style", "background-color: #000000;");
  gallery.appendChild(colorCombis[key].canv);

  colorCombis[key].ctx = colorCombis[key].canv.getContext('2d');
  colorCombis[key].img = new Image();
  colorCombis[key].img.onload = function() {
    colorCombis[key].ctx.drawImage(colorCombis[key].img, 0, 0, Math.floor(bBox.width), Math.floor(bBox.height));
  }
  colorCombis[key].img.src = "data:image/svg+xml;base64," + btoa(svgHTML.outerHTML.replace(/ff6633/i, colorCombis[key].colors[0]).replace(/66cccc/i, colorCombis[key].colors[1]));
}

canvas {
  margin: 0.2rem;
}

<div id="canvasGallery"></div>
<div id="svgwrap" style="visibility: hidden;">
  <svg id="svgpic" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
 <circle style="fill:#FF6633;" cx="50" cy="50" r="30"/>
 <rect style="fill:#66CCCC;" x="30.4" y="66.2" width="39.3" height="8.4"/>
 </svg>
</div>