title: Using HTML5/CSS3 to perform image animation the old-fashioned way (That means Sprite animation!)
body: <p>So I'm attempting to use a sprite sheet to perform animation.  I've spurned canvas and gone down the HTML5/CSS3 route of displaying images to the screen but have run into a potential stumbling block before even beginning.</p>
  
  <p>Here's a sample sprite sheet (excuse the horrific programmer-art):</p>
  
  <p><a href="http://img690.imageshack.us/img690/9126/stickmanrun.jpg" rel="nofollow noreferrer">http://img690.imageshack.us/img690/9126/stickmanrun.jpg</a></p>
  
  <p>So frame 1 is (&lt;0,0>&lt;64,64>), frame 2 is (&lt;64,0>&lt;128,64>) etc.</p>
  
  <p>In order to render my images I'm grabbing a  and then inserting innerHTML in order to represent my images, for example (in pseudo-code):</p>
  
  <pre><code>var image = document.createElement('image.jpg');
  var render = get &lt;div id='RenderSpace'&gt;
  
  render.innerHTML = &lt;div xpos ypos framexy1(e.g 0,0) image&gt;
  </code></pre>
  
  <p>My problem is how do I specify the region of the image I want to 'clip' out?  </p>
  
  <p>Surely this must be straight-forward but I've only found information using a clip mask which isn't really want I want, I just want to specify a RECT that 'cuts-out' the image from the sprite sheet and I then want to specify a RECT which describes where I want to 'paste' it on to the screen.</p>