Javascript - 2D шутер Canvas translate bug

Question

Я делаю этот 2D-шутер, который стреляет пулями от игрока в сторону мыши (например, Enter The Gungeon), который работал нормально, но когда я переворачиваю холст, чтобы центрировать игрока, пули стреляют в другом направлении, чем предполагалось ( если функция огня вызывается перед canvas.restore ()). Кажется, он направляет пули с места нахождения игрока, если я не перевел холст. Другой сценарий состоит в том, что пули стреляют в правильном направлении, но не в том месте (если функция огня вызывается после canvas.restore ()). Как я могу это исправить? Вот код:

                //from function player()

                this.fire = function() {

                    if(this.reloading != true && click == true && ammo > 0) {

                        var ndog = new bullet(this.x + 0.5*this.width - 0.5*width, this.y + 0.5*this.height - 0.5*height, width, height, "SteelBlue", 10);

                    }

                    for(var i = 0; i < bullets.length; i++) {
                        bullets[i].draw();
                    }




                }

                //from setInterval

                p1 = new player(x, y, width, height, color, speed);
                b.save();
                b.translate(-p1.x + canvas.width / 2, -p1.y + canvas.height / 2);
                p1.draw();
                p1.fire();
                b.restore();

вот изображение https://imgur.com/O0xBLTs и вот исходный код https://pastebin.com/Cxdx5Pw9 Перед использованием WASD или клавиш со стрелками (при запуске), пули ведут себя так, как они предназначены. Но при перемещении по холсту траектория пули искажается