Bullets won't shoot out of barrel

Question

I am working on a shooter game and I have a problem with bullets position (now are centered). How to change bullets position like on this image (+rotation): .

My example (https://jsfiddle.net/60kvpx7s/, controls: mouse, left button to shoot):

var ctx = game.getContext('2d');
var sprite = new Image;
sprite.src = "https://opengameart.org/sites/default/files/styles/medium/public/preview_idle.gif";
var player = {
  x: game.width / 2 - 250 / 2,
  y: game.height / 2 - 213 / 2,
  width: 250,
  height: 213,
  rotation: 0,
  vx: 0,
  vy: 0
};
var mouse = {x: 0, y: 0};
var angle = 0;
var bullets = [];

setInterval(function() {
  // bullets update
  for (var a = 0; a < bullets.length; a++) {
    var bullet = bullets[a];

    bullet.x += bullet.vx;
    bullet.y += bullet.vy;
  }
  // player update (rotate)
  angle = Math.atan2(mouse.y - (player.y + player.height / 2), mouse.x - (player.x + player.width / 2));
  player.rotation = angle * (180 / Math.PI);

  // draw
  ctx.clearRect(0, 0, game.width, game.height);

  // draw player (+rotate)
  ctx.save();
  ctx.translate(player.x + player.width / 2, player.y + player.height / 2);
  ctx.rotate(player.rotation * Math.PI / 180);
  ctx.drawImage(sprite, -player.width / 2, -player.height / 2, player.width, player.height);
  ctx.restore();

  // draw bullets
  for (var e = 0; e < bullets.length; e++) {
    var bullet = bullets[e];

    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
  }
}, 1000 / 60);

window.addEventListener("mousemove", function(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
});

window.addEventListener("mousedown", function(e) {
  bullets.push({
    width: 25,
    height: 25,
    x: player.x + player.width / 2 + (50 * Math.cos(angle)),
    y: player.y + player.height / 2 + (50 * Math.sin(angle)),
    vx: Math.cos(angle) * 7 + player.vx,
    vy: Math.sin(angle) * 7 + player.vy,
  });
});

<canvas id="game" width="640" height="480" style="border:1px solid;">

Can someone explain why this is happening and how I can fix this. Thanks in advance!

UPDATE: https://jsfiddle.net/60kvpx7s/9/

Answer 1

You need to add some "offset" (that is on your bullets.push) to start at right location:

Here is my attempt to put it on the right place, Also I changed your bullets to circles.

var ctx = game.getContext('2d');
var sprite = new Image;
sprite.src = "https://opengameart.org/sites/default/files/styles/medium/public/preview_idle.gif";
var player = {
  x: game.width / 2 - 250 / 2,
  y: game.height / 2 - 213 / 2,
  width: 250, height: 213,
  rotation: 0, vx: 0, vy: 0
};
var mouse = {x: 0, y: 0};
var angle = 0;
var bullets = [];

window.addEventListener("mousedown", function(e) {
  bullets.push({
    radi: 3,
    x: player.x + player.width / 2 - 5 / 2 + (100 * Math.cos(angle+0.5)),
    y: player.y + player.height / 2 - 5 / 2 + (100 * Math.sin(angle+0.5)),
    vx: Math.cos(angle) * 7 + player.vx,
    vy: Math.sin(angle) * 7 + player.vy,
  });
});

setInterval(function() {
  // bullets update
  for (var a = 0; a < bullets.length; a++) {
    var bullet = bullets[a];

    bullet.x += bullet.vx;
    bullet.y += bullet.vy;
  }
  // player update (rotate)
  angle = Math.atan2(mouse.y - (player.y + player.height / 2), mouse.x - (player.x + player.width / 2));
  player.rotation = angle * (180 / Math.PI);

  // draw
  ctx.clearRect(0, 0, game.width, game.height);

  // draw player (+rotate)
  ctx.save();
  ctx.translate(player.x + player.width / 2, player.y + player.height / 2);
  ctx.rotate(player.rotation * Math.PI / 180);
  ctx.drawImage(sprite, -player.width / 2, -player.height / 2, player.width, player.height);
  ctx.restore();

  // draw bullets
  for (var e = 0; e < bullets.length; e++) {
    var bullet = bullets[e];
    ctx.beginPath();
    ctx.arc(bullet.x, bullet.y, bullet.radi, 0, 2 * Math.PI);
    ctx.fill();
  }
}, 1000 / 60);

window.addEventListener("mousemove", function(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
});

<canvas id="game" width="640" height="480" style="border:1px solid;">