Fabricjs move background when panning

I've been trying for the last week to make this work, please give me a hand.

I'm currently panning the canvas (relativePan), but I can't move the background aswell. I've tried with pattern background but when modify the offset the entire background moves.

var canvas = new fabric.Canvas('c');
canvas.selection = false;

var pattern = new fabric.Pattern({
    source: 'https://cdn.seats.io/static/version/v198/chart-        designer/grid.png',
  repeat: 'repeat'
});

canvas.backgroundColor = pattern;
setTimeout(function(){canvas.renderAll();}, 10);

var circle = new fabric.Circle({
    radius: 20,
    fill: 'green',
    left: 100,
    top: 100,
    selectable: false
});

var triangle = new fabric.Triangle({
    fill: 'green',
    left: 200,
    top: 200,
    selectable: false
});

canvas.add(circle, triangle);

var panning = false;
canvas.on('mouse:up', function (e) {
    panning = false;
});

canvas.on('mouse:down', function (e) {
    panning = true;
});
canvas.on('mouse:move', function (e) {
    if (panning && e && e.e) {
        var delta = new fabric.Point(e.e.movementX, e.e.movementY);
        canvas.relativePan(delta);
        pattern.offsetX += e.e.movementX;
        pattern.offsetY += e.e.movementY;
        canvas.renderAll();
    }
});    

http://jsfiddle.net/w8xr15Lf/

I just need the backround to move the same way the objects do.

Thanks a lot!