Reducing the amount of times the "function" command is called

[Henry Enfray]

Hi, I'm new to this forum and I'm a beginner programming. Thus, I hope to have help in learning how to program. My question is I'm trying to change the game program below so that the function command is used much less. Below, the function command had been called about 20 times, and I'm trying to rearrange it and/or make it so that the function command be used just 5 times or less, or as minimal amount of times as possible (because too many function commands for me gets confusing and I'm just trying to simplify it more). Thus, I was wondering what to do. Thanks.

var gameWidth = canvasBg.width;
var gameHeight = canvasBg.height;
var fps = 10;
var drawInterval; 

// Declaring the items needed inside the game
var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');

var canvasJet = document.getElementById('canvasJet');
var ctxJet = canvasJet.getContext('2d');

var canvasEnemy = document.getElementById('canvasEnemy');
var ctxEnemy = canvasEnemy.getContext('2d');

var canvasHenry = document.getElementById('canvasHenry');
var ctxHenry = canvasHenry.getContext('2d');


//creating a variable to work with all sprites
var imgSprite = new Image();
imgSprite.src = 'Spirtes II.png';
imgSprite.addEventListener('load',init,false);


//Using various names for the sprites or items I use in the game
var jet1;  jet1 = new Jet();
var Enemy1; Enemy1 = new Enemy();
var Henry1; Henry1 = new Henry();



function init() {

    document.addEventListener('keydown',checkKeyDown,false);
    document.addEventListener('keyup',checkKeyUp,false);

    startDrawing();

}



function startDrawing() {
    stopDrawing();
    drawInterval = setInterval(draw,fps);
}

function stopDrawing() {
    clearInterval(drawInterval);
}

function draw() {
    drawBg();
    jet1.draw();
    Enemy1.draw(); 
    Henry1.draw(); 
}

//anything having to do with the background
function drawBg() {
    var srcX = 0;
    var srcY = 0;
    var drawX = 0;
    var drawY = 0;
    ctxBg.drawImage(imgSprite,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight);
}

function clearCtxBg() {
    ctxBg.clearRect(0,0,gameWidth,gameHeight);
    
}


//anything having to do with one of the Enemy's
function Enemy() {
    this.srcX = 0;
    this.srcY = 540;
    this.width = 100;
    this.height = 40;
    this.drawX = 500;
    this.drawY = 150;
}

Enemy.prototype.draw = function () {
    clearCtxEnemy();
    ctxEnemy.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
 
};


function clearCtxEnemy() {
     ctxEnemy.clearRect(0,0,gameWidth,gameHeight);
}

//anything having to do with me

function Henry() {
    this.srcX = 125;
    this.srcY = 500;
    this.width = 75;
    this.height = 90;
    this.speed = 2;
    this.drawX = 400;
    this.drawY = 300;
}

Henry.prototype.draw = function () {
    clearCtxHenry();
    this.drawX = this.drawX - this.speed;
    ctxHenry.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
     this.checkEscaped();

};


Henry.prototype.checkEscaped = function() {
    if (this.drawX + this.width <= 0) {
        this.recycleEnemy();
    }
};

Henry.prototype.recycleEnemy = function() {
    this.drawX = 1000;
   
};



function clearCtxHenry() {
     ctxHenry.clearRect(0,0,gameWidth,gameHeight);
}

//anything having to do with the jet

function Jet() {
    this.srcX = 0;
    this.srcY = 500;
    this.width = 100;
    this.height = 40;
    this.drawX = 220;
    this.drawY = 200;
    this.speed = 5;
    this.isUpKey = false;
    this.isRightKey = false;
    this.isDownKey = false;
    this.isLeftKey = false;
}


Jet.prototype.draw = function () {
    clearCtxJet();
    this.checkKeys();
    ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
};



Jet.prototype.checkKeys = function () {
    if (this.isUpKey) {
        this.drawY -= this.speed;
    }
    if (this.isRightKey) {
        this.drawX += this.speed;
    }
    if (this.isDownKey) {
        this.drawY += this.speed;
    }
    if (this.isLeftKey) {
        this.drawX -= this.speed;
    }
};



function checkKeyDown(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 || keyID === 87) { //up arrow or W key
        jet1.isUpKey = true;
        e.preventDefault();
    }
    if (keyID === 39 || keyID === 68) { //right arrow or D key
        jet1.isRightKey = true;
        e.preventDefault();
    }
    if (keyID === 40 || keyID === 83) { //down arrow or S key
        jet1.isDownKey = true;
        e.preventDefault();
    }
    if (keyID === 37 || keyID === 65) { //left arrow or A key
        jet1.isLeftKey = true;
        e.preventDefault();
    }
}


function checkKeyUp(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 || keyID === 87) { //up arrow or W key
        jet1.isUpKey = false;
        e.preventDefault();
    }
    if (keyID === 39 || keyID === 68) { //right arrow or D key
        jet1.isRightKey = false;
        e.preventDefault();
    }
    if (keyID === 40 || keyID === 83) { //down arrow or S key
        jet1.isDownKey = false;
        e.preventDefault();
    }
    if (keyID === 37 || keyID === 65) { //left arrow or A key
        jet1.isLeftKey = false;
        e.preventDefault();
    }
}


function clearCtxJet() {
     ctxJet.clearRect(0,0,gameWidth,gameHeight);
}


//  I wish significantly reduce the amount of times I used the function commands above if I could. Thanks!

[Greg Charles]

This definitely isn't Java. It looks like it could be JavaScript, so let's try it over in that forum.

[Henry Enfray]

Greg Charles wrote:This definitely isn't Java. It looks like it could be JavaScript, so let's try it over in that forum.

Ok thanks