performance - Javascript Game Code Running Very Slow -

i wanted build little , forth shooter game in javascript final class project in digital art. however, code have written starts run after few seconds. @ first using setinterval(), switched on requestanimationframe() try , improve performance. didn't work. here code:

var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d") var youtube = new image();   // create new img element var bullet = new image(); var background = new image(); var spaceship = new image(); var url = new image (); var moveh = 150 var shipx = 150 var right = true var rightpressed = false var leftpressed = false var spacepressed = false var bulletup = 280 var shot = false var explosion = false  document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false);   function keydownhandler(e) {     if(e.keycode == 39) {         rightpressed = true;     }else if(e.keycode == 37) {         leftpressed = true;     }else if (e.keycode == 32){         spacepressed = true     } } function keyuphandler(e) {     if(e.keycode == 39) {         rightpressed = false;     }     else if(e.keycode == 37) {         leftpressed = false;     }      else if (e.keycode == 32){         spacepressed = false;     } } function moveship(){     drawship()     canvas.width = canvas.width     if (rightpressed && shipx < 380){         shipx += 7     }     else if (leftpressed && shipx > 3){         shipx -= 7     }  } function drawyoutube(){ youtube.addeventlistener("load", function() {   ctx.drawimage(youtube, moveh,10); }, false); youtube.src = 'youtube.png'; // set source path } function drawbackground(){ background.addeventlistener("load", function(){ ctx.drawimage(background, 0,0); }, false); background.src = "paper.jpg" }   function drawship(){ spaceship.addeventlistener("load", function(){     ctx.drawimage(spaceship, shipx, 250);        }, false); spaceship.src = "spaceship.png"; }  function moveyoutube(){     drawyoutube()     if (right == true){     moveh += 8     if (moveh > 380){         right = false     }     }     else if(right == false){         moveh -= 10     }if (moveh < 3){         right = true     } } function drawbullet(){     if (shot == true){     bullet.addeventlistener("load", function(){         ctx.drawimage(bullet, shipx + 40, bulletup);     }, false);     bullet.src = "bullet.png";     }      } function shoot(){     if (spacepressed){         shot = true     }      else if (shot == true){         drawbullet()         bulletup -= 10     }if (bulletup == -20){         shot = false         bulletup = 260     }else if(bulletup == 10){         explosion == true         write()      }     }       } function write(){ url.addeventlistener("load", function(){ ctx.drawimage(background, 150,35); }, false); url.src = "url.png" }   function draw(){     drawbackground()     moveship()     shoot()     moveyoutube()     requestanimationframe(draw) } 

my gut saying has how i'm loading images, don't know.

as stated in comment alexander o'mara, trying reload images every time draw them.

before start game logic, need step load image assets. this:

var imagesrcs = ['youtube.png', 'bullet.png', 'paper.jpg', 'spaceship.png', 'url.png']; var images = [youtube, bullet, background, spaceship, url]; var loadcount = 0; // keep count of images have loaded far  function loadimages() {    for(var = 0; i<images.length; i++) {        loadimage(images[i], imagesrcs[i]);    } }  function loadimage(img, src) {     img.addeventlistener('load', imageloaded);     img.src = src; }  function imageloaded() {    loadcount++;    if(loadcount === images.length) {        startgame();    } } 

you can start rendering , update loop startgame knowing images have loaded. after point can confident ctx.drawimage(spaceship, 0, 0) should draw image canvas , don't have wrap in load event handler.