Tile an Image using javascript and canvas.

Library Independent.

HTML

<canvas id="canvas" width="320" height="240"></canvas>

CSS

#canvas{
    border: 1px solid black;
}

JavaScript

function tile(context, image, tiles){
    for(r=0; r<tiles; r++){
        for(c=0; c<tiles; c++){
            context.drawImage(image, 
            (image.width/tiles)*r, (image.height/tiles)*c, 
             image.width/tiles,     image.height/tiles);
        }
    }
}
        

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');

    // create new image object to use as pattern
    var img = new Image();
    //img.width = 40;
    //img.height = 30;
    img.src = 'http://secondlife.com/app/image/cd2841a0-4272-0e67-bd71-0d93d1022fc2/2';
    img.onload = function() {

        /* This is the code that the tile function basically generates        
        ctx.drawImage(img, 0, 0, img.width/2, img.height/2);
        ctx.drawImage(img, img.width/2, 0, img.width/2, img.height/2);
        ctx.drawImage(img, img.width/2, img.height/2, img.width/2, img.height/2);
        ctx.drawImage(img, 0, img.height/2, img.width/2, img.height/2);
        */
        tiles = 3;
        tile(ctx, img, tiles);

    }
}
draw();