title: Smooth Animation in HTML5 Canvas
body: <p>So I was creating a game on the canvas in HTML and Javascript. I wanted to make some kind of flappy bird-ish game but when I press a key, the animation of the player looks really stuttering. Take a look: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="Style.css"/&gt;
  &lt;/head&gt;
  &lt;body onload="startgame()"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;script&gt;
      canvas.height=window.innerHeight;
      canvas.width=window.innerWidth;
  
  function startgame() {
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");
      
      var x = 900;
      var y = 300;
      var w = 25;
      var h = 500;
      var yperson = 20;
      var xperson = 200;
      
      document.addEventListener("keydown", function() {
          yperson -= 150;
      });
      
      function updateperson() {
          yperson = yperson;
      }
      
      setInterval(createobject, 10);
      function createobject() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          
          x -= 1;
          yperson += 0.5;
          yperson *= 1.003;
          
          ctx.fillStyle = "#009999";
          ctx.fillRect(x,y,w,h);
          
          ctx.fillStyle = "black";
          ctx.fillRect(xperson,yperson,30,30);
          
          if (x &lt;= 50) {
              if (yperson &lt; 280 &amp;&amp; xperson === x-30) {
                  x -= 1;
              } else if (yperson &gt; 280){
                  x += 1;
              }
          }
        
          
      }
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want it to have a smooth animation up. I have seen some people saying it should be done with requestanimationframe but I don't know how to use it. </p>
  
  <p>Thanks in advance.</p>