title: clear the screen and move the element in html5 canvas
body: <p>I am working on a car racing game in HTML5 canvas and JS. So when a car move then I want to clear the previous screen and move the car. But it's not working as expected.  </p>
  
  <p>Code:</p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  
  var y = 110;
  var x = 10;
  var speed = 0.5;
  
  function movePlayer(){
    //context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    var player = new Image();
    player.src = "http://www.clker.com/cliparts/J/W/v/e/2/z/vertical-top-view-of-car-md.png";
    player.onload = function(){
      context.drawImage(player, x, y, player.width*0.4, player.height*0.13);
    }
  
    y = y - speed;
  
    if (y &lt; -15){
      y = 110;
    } 
  
    requestAnimationFrame(movePlayer);
  }
  
  requestAnimationFrame(movePlayer)
  </code></pre>
  
  <p>Link: <a href="https://jsfiddle.net/jackysatpal/6j4c5dod/1/" rel="nofollow noreferrer">https://jsfiddle.net/jackysatpal/6j4c5dod/1/</a></p>