down sprite

$(document).keydown(function(e){
    var ctx = document.getElementById('canvas').getContext('2d');
    if (e.keyCode == 37) {
       //left
       ctx.translate(4, 0);
       drawsprite('l1');
       ctx.translate(4, 0);
       drawsprite('l2');
       ctx.translate(4, 0);
       drawsprite('l3');
       ctx.translate(4, 0);
       drawsprite('l1');
       drawbg();
       drawmap();
       return false;
    }
    if (e.keyCode == 39) {
       //right
       ctx.translate(-4, 0);
       drawsprite('r1');
       ctx.translate(-4, 0);
       drawsprite('r2');
       ctx.translate(-4, 0);
       drawsprite('r3');
       ctx.translate(-4, 0);
       drawsprite('r1');
       drawbg();
       drawmap();
       return false;
    }
    if (e.keyCode == 38) {
       //up
       ctx.translate(0, 4);
       drawsprite('b1');
       ctx.translate(0, 4);
       drawsprite('b2');
       ctx.translate(0, 4);
       drawsprite('b3');
       ctx.translate(0, 4);
       drawsprite('b1');
       drawbg();
       drawmap();
       return false;
    }
    if (e.keyCode == 40) {
       //down
       ctx.translate(0, -4);
       drawsprite('f1');
       setTimeout(function() {
          ctx.translate(0, -4);
          drawsprite('f2');
       }, 100);
       setTimeout(function() {
          ctx.translate(0, -4);
          drawsprite('f3');
       }, 800);
       setTimeout(function() {
          ctx.translate(0, -4);
          drawsprite('f1');
       }, 800);
       drawbg();
       drawmap();
       return false;
    }
});