title: Fabric.js - How to animate from a sprite sheet
body: <p><strong>JavaScript syntax:</strong> </p>
  
  <pre><code>context.drawImage(img,srcX,srcY,srcWidth,srcHeight,x,y,width,height);
  </code></pre>
  
  <p>In Javascript, if I wanted to animate the following spritesheet, I would simply update <code>srcX</code> and <code>srcY</code> every animation frame in order to capture segments of the image.</p>
  
  <p><a href="https://i.stack.imgur.com/M06El.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M06El.jpg" alt="enter image description here"></a></p>
  
  <p>This results in each frame being clipped and displayed individually onto the <code>canvas</code>, which when updated at a fixed frame rate results in fluid sprite animation, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/mkKgX.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mkKgX.gif" alt="enter image description here"></a></p>
  
  <p>How can I do this using the "Fabric.js" library?</p>
  
  <p><strong>Note:</strong> One way to achieve this would be to set <code>canvasSize = frameSize</code> so that only one frame can be seen at any given time. Then by moving the image around, different frames can be placed inside the canvas in order to simulate animation. This will not work however with a large canvas, or with variable frame sizes.</p>