Moving the start position of canvas pattern

Question

I have a code:

function draw(ctx) {
  // create new image object to use as pattern
  var img = new Image();
  img.onload = function(){
    // create pattern
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);
  }
  img.src = 'images/wallpaper.png?' + new Date().getTime();
}

How can i move the start position of pattern image?

Answer 1

More general, complex transforms of the pattern alone are easily done. The trick is to do them immediately before the call to fill() or stroke().

function draw(ctx) {
    // create new image object to use as pattern
    var img = new Image();
    img.onload = function(){
        // create pattern
        var ptrn = ctx.createPattern(img,'repeat');
        ctx.fillStyle = ptrn;
        ctx.beginPath();
        ctx.rect(0, 0, 150, 150);

        ctx.translate(-33, -33);
        ctx.fill();
    }

    img.src = 'images/wallpaper.png?' + new Date().getTime();
}

Answer 2

In response to the accepted answer: rather than undo the offset, I would use save() & restore() to avoid potential problems:

ctx.save();
ctx.translate(offset_x, offset_y);
ctx.fillRect(-offset_x, -offset_y, fill_x, fill_y);
ctx.restore();