Make bullets originate from end of cannon

html/images/tanks.svg

@@ -5,6 +5,11 @@
       /* fill-opacity: 0.9; */
     }
 
+    #frames {
+      position: absolute;
+      right: 0px;
+    }
+
     p {
       border: 1px solid black;
       box-size: border-box;
@@ -37,6 +42,10 @@
       opacity: 0.5;
     }
 
+    circle.bullet {
+      fill: orangered;
+    }
+
     /* @keyframes rotate { */
     /*   from { */
     /*     transform: rotate(0); */
@@ -57,9 +66,7 @@
         <line x1="0" y1="0" x2="0" y2="8" stroke="black"/>
       </g>
     </g>
-    <g id="bullets">
+    <g id="bullets"></g>
-      <!-- <circle r="10" x="10" cy="10"/> -->
-    </g>
 
     <!-- <circle id="bullet" cx="0" cy="0" r="1"/> -->
 
@@ -70,7 +77,7 @@
   </g>
 
   <foreignObject x="-200" y="-150" width="100%" height="100%">
-    <div id="frames" style="position: absolute; right: 0px;" xmlns="http://www.w3.org/1999/xhtml">
+    <div id="frames" xmlns="http://www.w3.org/1999/xhtml">
       <span id="fps" xmlns="http://www.w3.org/1999/xhtml">0</span> fps
     </div>
 
@@ -137,13 +144,25 @@
       const radians = degrees * Math.PI / 180;
       const vx = -Math.sin(radians);
       const vy = Math.cos(radians);
+      const bulletTimeout = 5000; // miliseconds
+      const cannonLength = 8;
 
       const el = document.createElementNS(namespaceURIsvg, 'circle');
+      el.classList.add('bullet');
       el.setAttribute('r', 1);
       el.setAttribute('cx', 0);
       el.setAttribute('cy', 0);
       const node = bulletsContainer.appendChild(el);
-      const bullet = { x: x, y: y, vx: vx, vy: vy, time: 5000, node: node }
+
+      const bullet = {
+        x: x + vx * cannonLength,
+        y: y + vy * cannonLength,
+        vx: vx,
+        vy: vy,
+        time: bulletTimeout,
+        node: node
+      }
+
       bullets.push(bullet);
     }
 
@@ -208,6 +227,7 @@
       const changeY = 0.001 * elapsed * velocityY;
 
       bullets.forEach((bullet, index) => {
+        const deleteCount = 1;
         bullets[index].time -= elapsed;
 
         if (bullets[index].time > 0) {
@@ -220,7 +240,7 @@
           bullet.node.style.transform = `translate(${bx}px, ${by}px)`;
         } else {
           bullet.node.remove();
-          bullets.splice(index, 1);
+          bullets.splice(index, deleteCount);
         }
       });
 
@@ -293,7 +313,7 @@
 
     fireButton.addEventListener("click", function (e) {
       const [x, y] = getTranslate(hitbox);
-      fireBullet(+x, +y);
+      fireBullet(x, y);
     });