I am trying to implement a firing mechanism as in the original.

I don't know how to find out if there's only one projectile existing and when it leaves the upper screen so the player can shoot again.

if (gameArea.key === "Space") {
    playerProjectile = new component(2, 7, "white", player.x + player.width /2, player.y);
    playerProjectile.speedY = +2;

I initialize a new component when the player presses the spacebar. It needs to check if there's still a projectile on the screen, and if it has left the screen.

Here's my component function:

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;

this.update = function () {
    ctx = gameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

this.playerNewPos = function () {
    this.x += this.speedX;
    if (this.x < 0) {
        player.x = 0;
    } else if (this.x > gameArea.canvas.width - player.width) {
        player.x = gameArea.canvas.width - player.width;
    }
}

this.playerProjectileNewPos = function () {
    this.y -= this.speedY;
}