# Canvas background from sprite (HTML5)

I am starting to develop my fist bigger game in HTML5 and struggling a bit with sprites. I can cut out single items, but I need to repeat them as well. For example, I have a battle ground that consists of grass, dirt path, building and a pond. I have all these in one sprite. But what I really need is to cut out the grass and repeat is as background on whole canvas.

I cannot believe that this wouldn't be possible, using sprites would loose almost completely point there... (apart from single static items of course).

I would appreciate if someone would have solution to this.

• A quick comment about profiling. Resist the temptation guess about whether or not something is good/bad for performance, and use a profiler instead. Chrome, for example, has a profiler built in to the dev console. So if something is "good enough", go with it until your profiler says otherwise. In the context of this question, just use drawImage() in loop to start with. It's simple and you can optimize if necessary later. Make it work, then make it fast. =) – larsbutler Apr 16 '13 at 16:27