Generating a mosaic

I have been playing around with tables and random colors to generate some mosaic.

As I find it rather slow, tell me how it can be improved in terms of speed.

function generate_mosaic(cols, rows) {
    var i, ncol, trans, colspan, style, html;
    html += "";

    for (i = 0; i ";
        ncol = 0;
        while (ncol  ";
        }
        html += "";
    }
    html += "";
    return html;
}

document.write(generate_mosaic(250, 250));

Code is also available as a jsfiddle

I suggest using document.body.innerHTML instead of document.write()

document.body.innerHTML = generateMosaic();

also put Math.random in a variable so it doesn't have to go back to the math object each time:

var random = Math.random;
random() * 255;

Also Math.Floor is apparently quite slow try >> 0 instead

((random() * 255) >>0);

(an example using HTML5 canvas):

http://jsfiddle.net/yHxxT/1/

function generate_mosaic2(cols, rows, canvasElement) {
    var colUnitSize = canvasElement.width / cols;
    var rowUnitSize = canvasElement.height/ rows;
    var nrows = rows;
    var rows2 = rows * 2;
    var cols2 = cols * 2;
    var trans = 0;
    var random = Math.random;
    var floor = function (number){ return (number >> 0); };
    var context = canvasElement.getContext("2d");
    var colspan = 0;
    context.fillStyle = "#000";
    context.fillRect(0,0, 1000, 1250); //Black background
    do
    {
        var ncols= cols;
        do
        {
            trans = ncols / cols2 + nrows / rows2;

            if(ncols === 1)
            {
                colspan = 1;
            }
            else
            {
                colspan = floor(random() * 2);
            }
            context.fillStyle = "rgba(" + floor(random() * 255) + ", " + floor(random() * 255) + ", " + floor(random() * 255) + ", " + trans + ")";
            context.fillRect(ncols * colUnitSize , nrows * rowUnitSize , colspan * colUnitSize  , rowUnitSize);
            ncols -= colspan;
        }while(ncols)
    }while(--nrows)

}

http://jsperf.com/mosaic jsperf would suggest that the canvas solution is more than 2 times faster for a 250x250 or 150x150

StackExchange Code Review Q#4488, answer score: 4