Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

So I'm trying to repeat a portion of my spritesheet as a background. So far, I have attempted this:

var canvas = $("#board")[0],
    ctx = canvas.getContext("2d"),
    sprite = new Image();
    sprite.src = "spritesheet.png";
sprite.onload = function(){
    ctx.fillStyle = ctx.createPattern(spriteBg, "repeat");
    ctx.fillRect(0, 25, 500, 500);

As you can see, it repeat the whole image, not just a part of it, and I just can't figure out how to do that last part.

share|improve this question
@KeithThomas +1, thanks! – Mobilpadde Oct 7 '12 at 15:32
Mobil: If that solved your problem, you should post your conclusions as an answer. Then others with the same problem can find it too. – Anko Dec 8 '12 at 11:48
@KeithThomas Yea sorry. Posted my answer now :D – Mobilpadde Dec 8 '12 at 16:05
up vote 0 down vote accepted

This'll do! :D

var sprite     = new Image(),
    sprite.src = "spritesheet.png",
    texture    = {y: 42, x: 2*14},
    ptrn       = generatePattern(sprite, texture.x, texture.y);
ctx.fillStyle  = ctx.createPattern(ptrn, "repeat");
ctx.fillRect(0, 0, 500, 500);

Thanks to @KeithThomas for linking to

share|improve this answer
I'm confused by this answer, what is the generatePattern() method? I can't find any info on this online...did you mean to use createPattern() twice? Can you pass the x and y coordinates to this method instead of just "repeat"? – Rohan Deshpande Jan 13 '14 at 4:46

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.