Warum wiederholt/überschneidet sich das Füllmuster meiner Leinwand?

Question

Ich habe ein Raster aus abgerundeten Rechtecken gezeichnet, die ich mit einem Bildhintergrund füllen muss. Schließlich werde ich viele Bildhintergründe haben, aber für jetzt, ich versuche, es zu bekommen, mit einem zu arbeiten. Ich bin nahe dran, meine Rechtecke zu zeichnen, aber die Füllung tut etwas ein wenig verrückt - es überlappt sich und tötet mein Muster (außer an den Rändern) im Grunde füllen die gesamte Leinwand mit dem Bild. Ich habe versucht, meinen Pfad zu "beschneiden", aber das bewirkt nur, dass nur ein Rechteck gefüllt wird. Ich bin mir nicht sicher, was ich falsch mache, und ich hoffe, ein Canvas-Experte kann es erkennen?

/* build rounded rectangle */
var roundedRect=function(ctx,x,y,width,height,radius,fill,stroke) 
{ 

 ctx.save(); // save the context so we don't mess up others ctx.beginPath(); 

// draw top and top right corner ctx.moveTo(x+radius,y);
ctx.arcTo(x+width,y,x+width,y+radius,radius); 

// draw right side and bottom right corner 
ctx.arcTo(x+width,y+height,x+width-radius,y+height,radius); 

// draw bottom and bottom left corner 
ctx.arcTo(x,y+height,x,y+height-radius,radius); 

// draw left and top left corner 
ctx.arcTo(x,y,x+radius,y,radius); 
ctx.clip(); 

if(fill){ ctx.fill(); } 

if(stroke){ ctx.stroke(); } 

 ctx.restore(); // restore context to what it was on entry 
} 

/* onload, fill canvas with pattern of rounded rectangles separated by 2px */
window.onload = function() {
var canvas = document.getElementById("canvas");
/* rounded filled rectangle pattern */
var canvasWidth=530;
    var canvasHeight=530;
    var recWidth=42;
    var recHeight=42;
    var grout=2;
    var radius=2;
    var cols=canvasWidth/(recWidth+grout);
    var rows=canvasWidth/(recHeight+grout);

    /* loop through each row/column to build pattern */
    alert("rows" + rows + " & cols " + cols);
    for (i=1; i<rows; i++){
        for (j=1; j<cols; j++){
            var ctx = canvas.getContext("2d");
            /* fill pattern */
            var img=document.getElementById("poppy");
            var pat=ctx.createPattern(img,"repeat");
            ctx.fillStyle=pat;  
            roundedRect(ctx,(j*grout + (j-1)*recWidth),(i*grout + (i-1)*recHeight),recWidth,recHeight,radius,true,false);       

                }
             }
};