Repeat a part of spritesheet as background

Question

So I'm trying to repeat a part of my spritesheet as a background (js, canvas).

My code so far:

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);
}

This is fine, but as you can see, it repeat the whole sprite, not just a part of it, and I just can't figure out how to do it D:

Answer 1

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 http://stackoverflow.com/questions/8761670/multiple-image-patterns-in-2d-context-of-html5-canvas