<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var x = 250;
  var y = 250;
  var marioSize = 25;
  var marioSpeed = 5;
  var jumpHeight = 30;
  
  function startGame(){
    drawMario();
    document.onkeydown = keyPressed;
  }
  
  function drawMario(){
    ctx.beginPath();
    ctx.rect(x, y, marioSize, marioSize);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
  }
  
  function keyPressed(e){
    if(e.keyCode == '37'){
      moveLeft();
    }
    else if(e.keyCode == '39'){
      moveRight();
    }
    else if(e.keyCode == '38'){
      moveUp();
    }
    else if(e.keyCode == '40'){
      moveDown();
    }
  }
  
  function moveLeft(){
    x -= marioSpeed;
    drawMario();
  }
  
  function moveRight(){
    x += marioSpeed;
    drawMario();
  }
  
  function moveUp(){
    y -= jumpHeight;
    drawMario();
  }
  
  function moveDown(){
    y += jumpHeight;
    drawMario();
  }
  
</script>