Problem with JavaScript game with Canvas

Good evening to the community, I've been programming, or good, trying to schedule a game on canvas. I still do not know how to put it, but, if the functions that I would like to fulfill. For now, the design is pure rectangles, then, I will add pictures. It should be noted that I am a newbie in JS. The game must be developed in pure JS, without the use of external libraries.

The problem is that I have already managed to get my rectangle to move with respect to the X axis when I press the arrows on the keyboard, but I am trying to encode the part of the shots that I should perform when a key (in my case, the spacer) ) press.

Here the code, I do not know what I have bad, I do not know why I do not draw the "bullets" or shots, thanks!

My wish is that, by pressing the space key, or xs key, it will fire. But I have not succeeded, I do not know why he does not paint it for me. Thanks for your time, regards.

var canvas = document.getElementById('canvasjuego');
ctx = canvas.getContext("2d");
var background;
var backgroundAnchura;
var backgroundAltura;
var vidas = 3;
var lifes = 'VIDAS: 3';
var ramdonPosX1=500;
var ramdonPosY1=80;
var contador = 3;
var disparoscontador=0;
var intervaloCanon;
var intervaloDisparos;

var canonJson={
    //atributos del canon
    posX:   400,
    posY:   40,
    width:  50,
    height: 50
}

var balas={
    //atributos de la bala en movimiento
    posX: canonJson.posX+25,
    posY: canonJson.posY-10,
    width: 15,
    height: 15
}
var evento={}



var arrayDisparos=[];

function funcionBackground(){
    background = new Image();
    background.src='background2.png';

    background.onload = function(){
        ctx.fillStyle='white';
        ctx.font="20px Arial";
        ctx.fillText(lifes,20,20);

        intervaloCanon = window.setInterval(cargarEnMarco,1000/55);
    }

}

function aviones(){
    var ramdonPosX=Math.floor((Math.random()*650)+0);
    var ramdonPosY=Math.floor((Math.random()*200)+20);

        ctx.fillStyle='white';
        ctx.beginPath();
        ctx.fillRect(ramdonPosX,ramdonPosY,10,10); //x desde 150 hasta 650 //y desde 5 hasta 100
        ctx.closePath();


    if(ramdonPosX1==canonJson.posX||ramdonPosY1==canonJson.posY){
        alert('tienes una vida menos');
    }
    disparoscontador++;
    if(disparoscontador>100){
        //clearInterval(intervaloCanon);
        alert("yaas");
    }   
}

function moverDisparos(){
    for(var i=0;i<arrayDisparos;i++){
        balaActual=arrayDisparos[i];
        balas.posY=bala.posY-5;
    }
    //arrayDisparos=arrayDisparos.filter();
}

function disparosCanon(){
    arrayDisparos.push(balas);
}

function disparosFinales(){
    ctx.fillStyle='white';
    for(var i=0;i<arrayDisparos;i++){

        var privatedisparo = arrayDisparos[i];
        ctx.fillRect(balas.posX,balas.posY,balas.width,balas.height);

    }
}

function disparosEjecutar(){
    if(evento[32]){
        disparosFinales();
    }
}

function cargarEnMarco(){
    //aviones();
    canon();
    //disparosFinales();

}

function keyboardEvents(){

    agregarEventos(document,"keydown", function(e){
        evento[e.keyCode] = true; //tecla presionada en TRUE

    });

    agregarEventos(document,"keyup", function(e){
        evento[e.keyCode] = false; //tecla que dejo de ser presionada en false
    });

}

function agregarEventos(elementoDelEvento, nombreEvento, funcionAEjecutar){
    if(elementoDelEvento.addEventListener){
        elementoDelEvento.addEventListener(nombreEvento, funcionAEjecutar, false);
    }
}

function canon(){

    if(evento[37]){

        canonJson.posX-=4;

        if(canonJson.posX<0){
            canonJson.posX=10; //para que no se salga del canvas
        }
    }

    if(evento[39]){ //movimiento a la derecha

        canonJson.posX+=4;
        if(canonJson.posX>750){
            canonJson.posX=740;
        }

    } else {

        disparosEjecutar();
    }

    ctx.clearRect(canonJson.width-50,canonJson.height-5,canvas.width,canvas.height);
    ctx.fillStyle='red';
    ctx.fillRect(canonJson.posX,350,canonJson.width,canonJson.height);

}   


function pruebaVidas(){

    vidas--;

    //prueba tambien de avion enemigo\
    ctx.clearRect(ramdonPosX1,ramdonPosY1,10,10);
    ramdonPosX1=ramdonPosX1-20;
    ramdonPosY1=ramdonPosY1+60;

    //fin prueba avion enemigo
    if(vidas==2){
        ctx.fillStyle='black';
        ctx.fillText(lifes,20,20);
        ctx.fillStyle='white';
        ctx.font="20px Arial";
        ctx.fillText("VIDAS: "+vidas,20,20);
    } else if (vidas==1){
        ctx.fillStyle='black';
        ctx.fillText(lifes,20,20);
        ctx.fillStyle='white';
        ctx.font="20px Arial";
        ctx.fillText("VIDAS: "+vidas,20,20);

    } else if (vidas==0){
        ctx.fillStyle='black';
        ctx.fillText(lifes,20,20);
        ctx.fillStyle='white';
        ctx.font="20px Arial";
        ctx.fillText("HAZ PERDIDO D':",20,20);
    }
}

keyboardEvents();
funcionBackground();
//aviones();
//canon();