Currently, I am exploring the use of a sprite sheet for animation purposes. Rather than using canvas, I have opted for the HTML5/CSS3 method of displaying images on the screen. However, I have encountered a potential obstacle at the start of this process.
Here is an example of a sprite sheet (please excuse the crude programmer art):
Each frame is identified with coordinates such as frame 1 (<0,0><64,64>), frame 2 is (<64,0><128,64>), and so on.
To display my images, I am creating a new image element and then using innerHTML to represent my images. For instance, in pseudo-code:
var image = document.createElement('image.jpg');
var render = get <div id='RenderSpace'>
render.innerHTML = <div xpos ypos framexy1(e.g 0,0) image>
My dilemma lies in how to specify the specific region of the image that I want to 'clip' from the sprite sheet. It seems like this should be a straightforward process, but all the information I have found so far involves using a clip mask, which is not what I am looking for. I simply want to define a rectangle that 'cuts-out' the image from the sprite sheet and then specify another rectangle that determines where I want to 'paste' it on the screen.