javascript - Moving the players image with keyboard -

hey making platformer game , before, player rectangle. have changed image keys don't move it. how can make keys wasd move players image? did before, forget how did it.

(function () {      var requestanimationframe = window.requestanimationframe || window.mozrequestanimationframe || window.webkitrequestanimationframe || window.msrequestanimationframe;      window.requestanimationframe = requestanimationframe;  })();    var canvas = document.getelementbyid("canvas"),      ctx = canvas.getcontext("2d"),      width = 1000,      height = 200,      player = {          x: width / 2,          y: height - 15,          width: 48,          height: 64,          speed: 3,          velx: 0,          vely: 0,          jumping: false,          grounded: false,          count: 0,          img: new image()      },      keys = [],      friction = 0.8,      gravity = 0.3;      player.img.src = "img/playersheet.png";      player.img.onload = draw;    var boxes = [];    // dimensions  boxes.push({      x: 0,      y: 0,      width: 10,      height: height  });  boxes.push({      x: 0,      y: height - 2,      width: width,      height: 50  });  boxes.push({      x: width - 10,      y: 0,      width: 50,      height: height  });    boxes.push({      x: 120,      y: 100,      width: 80,      height: 80  });  boxes.push({      x: 250,      y: 150,      width: 80,      height: 80  });  boxes.push({      x: 400,      y: 180,      width: 80,      height: 80  });  boxes.push({      x: 270,      y: 150,      width: 40,      height: 40  });    canvas.width = width;  canvas.height = height;  var fps = 3;  var msperframe = 1000 / fps;  var starttime;    function draw() {    if (!starttime) starttime = date.now();    var elapsedtime = date.now() - starttime;    var spriteindex = math.floor(elapsedtime / msperframe) % 3;    requestanimationframe(draw);    document.getelementbyid('index').innerhtml = spriteindex;    sprx = (spriteindex % 3) * 170;    spry = math.floor(spriteindex / 3) * 350;    ctx.drawimage(player.img, sprx, spry, 170, 350, 150, 20, 48, 48);  }    function update() {      // check keys      if (keys[87] || keys[32]) {          // arrow or space          if (!player.jumping && player.grounded) {              player.jumping = true;              player.grounded = false;              player.vely = -player.speed * 2;          }      }      if (keys[68]) {          // right arrow          if (player.velx < player.speed) {              player.velx++;              //player.img.src = "img/player_r.png";          }      }      if (keys[65]) {          // left arrow          if (player.velx > -player.speed) {              player.velx--;              //player.img.src = "img/player.png";          }      }       if (keys[83]) {          // down arrow              //player.img.src = "img/player_crouch.png";      }        player.velx *= friction;      player.vely += gravity;        ctx.clearrect(0, 0, width, height);      ctx.fillstyle = "black";      ctx.beginpath();            player.grounded = false;      (var = 0; < boxes.length; i++) {          ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);                    var dir = colcheck(player, boxes[i]);            if (dir === "l" || dir === "r") {              player.velx = 0;              player.jumping = false;            } else if (dir === "b") {              player.grounded = true;              player.jumping = false;          } else if (dir === "t") {              player.vely *= -1;          }        }            if(player.grounded){           player.vely = 0;      }            player.x += player.velx;      player.y += player.vely;        ctx.fill();      draw();              requestanimationframe(update);  }        function colcheck(shapea, shapeb) {      // vectors check against      var vx = (shapea.x + (shapea.width / 2)) - (shapeb.x + (shapeb.width / 2)),          vy = (shapea.y + (shapea.height / 2)) - (shapeb.y + (shapeb.height / 2)),          // add half widths , half heights of objects          hwidths = (shapea.width / 2) + (shapeb.width / 2),          hheights = (shapea.height / 2) + (shapeb.height / 2),          coldir = null;        // if x , y vector less half width or half height, must inside object, causing collision      if (math.abs(vx) < hwidths && math.abs(vy) < hheights) {          // figures out on side colliding (top, bottom, left, or right)          var ox = hwidths - math.abs(vx),              oy = hheights - math.abs(vy);          if (ox >= oy) {              if (vy > 0) {                  coldir = "t";                  shapea.y += oy;              } else {                  coldir = "b";                  shapea.y -= oy;              }          } else {              if (vx > 0) {                  coldir = "l";                  shapea.x += ox;              } else {                  coldir = "r";                  shapea.x -= ox;              }          }      }      return coldir;  }    document.body.addeventlistener("keydown", function (e) {      keys[e.keycode] = true;  });    document.body.addeventlistener("keyup", function (e) {      keys[e.keycode] = false;  });      window.addeventlistener("load", function () {      update();  });

<head>      <title>platformer game</title>  </head>  <body>    <h3>arrow keys move, , space jump</h3>    <div>    sprite #<span id="index"></span>  </div>      <canvas id="canvas"></canvas>      <style>      canvas {      border:1px solid #d3d3d3;      background-color: #f1f1f1;  	}  	</style>  </body>

the 6th , 7th parameters in drawimage constants. change it:

 ctx.drawimage(player.img, sprx, spry, 170, 350, player.x, player.y, 48, 48);