title: FPS Lock for HTML Canvas/Javascript
body: <p>I've been attempting to do a frame by frame animation with a spritesheet I made on a HTML website and I could not figure out how to lock the fps for the animation. The issue is it's always going at lightning speeds, and I want to be able to lock it at ~ 10-15 fps
  I have tried using the Date.now() method, and the setInterval method but it doesn't seem to be working for the time being. </p>
  
  <p>The way I am using this animation is also reliant on checking an array to make sure that it should commit to animating the 4 frame animation that I made.
  Here's the code I've been using.</p>
  
  <pre><code>function animateCharacter() {
      var canvas = document.getElementById("portrait");
      var context = canvas.getContext("2d");
      var character = new Image();
      character.src = "/assets/spritesheet.jpg";
      animate();
      function animate() {
  
          context.drawImage(character, shift, 0, width, height, 300, 0, width / 2, height / 2);
  
          if (currentFrame == totalFrames) {
              shift = 0;
              currentFrame = 0;
          }
          requestAnimationFrame(animate);
  
  }
  </code></pre>