mgraphics image to pattern

I'm trying to make a JSUI that can be used like the panel object but with a texture applied. I want to be able to do a rounded rect, but I can't work out the correct way to use the image surface as a pattern. Does anyone know?

thanks,

oli

here's my jsui script so far...

inlets = 1;
outlets = 1;

autowatch = 1;

var gWidth = this.box.rect[2] - this.box.rect[0];
var gHeight = this.box.rect[3] - this.box.rect[1];

var imagefile = ""; // path of image or filename
var img = new Image(); // create a new Image

mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;

mgraphics.redraw();

var brgb = [1, 0., 0., 1.];
declareattribute("brgb", null, null, 1);

var scalev = 1.;
declareattribute("scalev", null, null, 1);

function bang()
{
mgraphics.redraw();
}

function clear()
{
notifyclients();
mgraphics.redraw();
}

function paint()
{
with (mgraphics)
{
    save();

    var ssrcw = Math.round(img.size[0] * scalev);
    var ssrch = Math.round(img.size[0] * scalev);

    for(y = 0; y < (gHeight / ssrch); y++)
{
for(x = 0; x < (gWidth / ssrcw); x++)
{
var xpos = x * ssrcw;
var ypos = y * ssrch;
image_surface_draw(img, [0, 0, img.size[0], img.size[1]], [xpos, ypos, ssrcw, ssrch]);
}
        }
        restore();
}
}

function onresize()
{
gWidth = box.rect[2]-box.rect[0];
gHeight = box.rect[3]-box.rect[1];

mgraphics.redraw();
}
onresize.local = 1;

function loadImage(s)
{
    imagefile = s;
    img.freepeer();
    img = new Image(s);

    mgraphics.redraw();
}