Предотвратить перезагрузку изображения при каждом нажатии клавиши (WASD)

Question

Я пытаюсь сделать 2D-игру, в которой WASD являются частью управления. На данный момент при каждом нажатии клавиш я перезагружаю изображение, заставляя его мерцать.

Я пытался поместить все .img src в массив в функции init (), но ничего не возвращается.

            // Draws player to page
        function drawImage(x, y, image, color) {
           // Create new image base
           var image_base = new Image();
           // Set source of image
           image_base.src = "images/" + image + ".png";
           // onload(not sure) draw image
           image_base.onload = function() {
              ctx.drawImage(image_base, x, y, tile_width, tile_width);
              // Add color overlay on tank for example when wall is hit
              if (color) {
                 draw(player.x, player.y, '#f00');
              }
           }
        }

        // Executed when message event is triggered
        socket.on('message', function(msg) {
           if (!msg) {
              return;
           }

           if (msg == 'w' || msg == 'a' || msg == 's' || msg == 'd') {
              movePlayer(msg, player);
           }
        });

        // Moves drawn object based on key inputs
        function movePlayer(key, player) {
           // Used to select direction image
           var direction = "";
           // Depending on key pressed draw image
           switch (key) {
              case 'w':
                 var direction = "up";
                 // Check top bounds
                 if (!checkBounds(player.x, player.y - tile_height)) {
                    drawImage(player.x, player.y -= tile_height, 'player_' + player.id + "_" + direction);
                 } else { // Out of bounds
                    drawImage(player.x, player.y, 'player_' + player.id + "_" + direction, "#f00");
                 }
                 break;
              case 'a':
                 var direction = "left";
                 // Check left bounds
                 if (!checkBounds(player.x - tile_width, player.y)) {
                    drawImage(player.x -= tile_width, player.y, 'player_' + player.id + "_" + direction);
                 } else {
                    drawImage(player.x, player.y, 'player_' + player.id + "_" + direction, "#f00");
                 }
                 break;
              case 's':
                 var direction = "down";
                 // Check bottom bounds
                 if (!checkBounds(player.x, player.y + tile_height)) {
                    drawImage(player.x, player.y += tile_height, 'player_' + player.id + "_" + direction);
                 } else {
                    drawImage(player.x, player.y, 'player_' + player.id + "_" + direction, "#f00");
                 }
                 break;
              case 'd':
                 var direction = "right";
                 // Check right bounds
                 if (!checkBounds(player.x + tile_width, player.y)) {
                    drawImage(player.x += tile_height, player.y, 'player_' + player.id + "_" + direction);
                 } else {
                    drawImage(player.x, player.y, 'player_' + player.id + "_" + direction, "#f00");
                 }
                 break;
           }

           // If more than 2 players are added this will have to become a loop
           // Draws other player
           if (player.id == 1) {
              drawImage(player_2.x, player_2.y, 'player_' + player_2.id + "_" + player_2.direction);
           } else {
              drawImage(player_1.x, player_1.y, 'player_' + player_1.id + "_" + player_1.direction);
           }
        }

        $(document).on("keydown", function(event) {

           if (event.which == 69) {
              socket.emit('test', 'x:' + player_1.x + "y:" + player.y);
           }

           // Tracks keys pressed until refresh
           var key = key_presses.push(event.which);
           // console.log(event.type + ": " + event.which);

           if (event.which == 87) {
              socket.emit('message', 'w');
           }
           if (event.which == 65) {
              socket.emit('message', 'a');
           }
           if (event.which == 83) {
              socket.emit('message', 's');
           }
           if (event.which == 68) {
              socket.emit('message', 'd');
           }
        });

Хотелось бы переместить изображение с WASD без перезагрузки каждый раз.