Copy and crop images in Javascript

Question

I'm trying to create a small 2D game in Javascript/Canvas which consists of several animated sprites. I'd like to cut down on the number of HTTP requests, so I combined each frame of animation (32px by 32px) into one image per sprite (say, 192px by 128px). Is there any way I can copy and crop these images clientside back into several smaller images? It would vastly simplify my rendering code and help reduce loading time due to network latency.

Answer 1

The HTML5 Canvas API provides a method called drawImage which allows you to crop the input image.

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

For more information see the spec (that image is taken directly from the spec):

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images