function randomFilledCanvas(canvasId, params) {
	var debugNr = 0;
	var canvasWidth;// = 100;
	var canvasHeight;// = 100;		// height of the canvas 
	var canvasFillDensity = 0.25;	// which percentage is filled
	var canvasFillWidth = 10;	// width of the color block
	var canvasFillHeight = 10; // height of the color block
	var canvasColorAlignment = 'none'; // none, ltr, rtl, ttb, btt
	var canvasDensityAlignedToColor = false;
	var canvasDensityAlignedToColorSpeed = 0.2;
	var canvasMixRange = true;
	var canvasMixRanges = [0.3, 0.7];
	var canvasBackgroundFillStyle = "rgba(255,255,255,1)";
	var canvasFillStyles = [ "rgba(0,0,0,1)","rgba(20,20,20,1)","rgba(40,40,40,1)", "rgba(80,80,80,1)","rgba(100,100,100,1)", "rgba(150,150,150,1)","rgba(200,200,200,1)", "rgba(255,255,255,1)"];
	var nrRanges = canvasMixRanges.length + 1; 
	var neutralRangeIndex = Math.floor(nrRanges / 2);

	if (params)	{
		//if (typeof(params.Id) != "undefined") { canvasId = params.Id;}
		if (typeof(params.fillDensity) != "undefined") { canvasFillDensity = params.fillDensity;/*alert(canvasFillDensity);*/}
		if (typeof(params.fillWidth) != "undefined") { canvasFillWidth = params.fillWidth;/*alert(canvasFillWidth);*/}
		if (typeof(params.fillHeight) != "undefined") { canvasFillHeight = params.fillHeight;/*alert(canvasFillHeight);*/}
		if (typeof(params.colorAlignment) != "undefined") { canvasColorAlignment = params.colorAlignment;/*alert(canvasColorAlignment);*/}
		if (typeof(params.densityAlignedToColor) != "undefined") { canvasDensityAlignedToColor = params.densityAlignedToColor;}
		if (typeof(params.densityAlignedToColorSpeed) != "undefined"){ canvasDensityAlignedToColorSpeed = params.densityAlignedToColorSpeed;}
		if (typeof(params.mixRange) != "undefined"){ canvasMixRange = params.mixRange;}
		if (typeof(params.mixRanges) != "undefined"){ canvasMixRanges = params.mixRanges;}
		if (typeof(params.backgroundFillStyle) != "undefined") {  canvasBackgroundFillStyle = params.backgroundFillStyle;}
		if (typeof(params.fillStyles) != "undefined") { canvasFillStyles = params.fillStyles;/*alert(canvasFillStyles);*/}
	}

	var canvas = document.getElementById(canvasId);
	var ctx = canvas.getContext("2d");
	canvasWidth = canvas.width;
	canvasHeight = canvas.height;
/*
	alert("fillDensity = " + canvasFillDensity + "\n" +
		"canvasFillWidth = " + canvasFillWidth + "\n" +
		"canvasFillHeight = " + canvasFillHeight + "\n" +
		"canvasColorAlignment = " + canvasColorAlignment + "\n" +
		"canvasDensityAlignedToColor = " + canvasDensityAlignedToColor + "\n" +
		"canvasDensityAlignedToColorSpeed = " + canvasDensityAlignedToColorSpeed + "\n" +
		"canvasMixRange = " + canvasMixRange + "\n" +
		"canvasMixRanges = [" + canvasMixRanges + "]\n" +
		"canvasBackgroundFillStyle = " + canvasBackgroundFillStyle + "\n"  +
		"canvasFillStyles = " + canvasFillStyles + "\n"  		
		);
*/		
	
		// Set default color
	ctx.fillStyle = canvasBackgroundFillStyle;	
	ctx.fillRect(0,0,canvasWidth, canvasHeight);
//alert(canvasBackgroundFillStyle);

	var randX=0, randY=0, randColor=0, posX=0, posY= 0, fillIndex=0;
	var fillRepeat = Math.floor(((canvasWidth / canvasFillWidth) * (canvasHeight / canvasFillHeight) ) * canvasFillDensity);
	//alert(canvasFillDensity);
//	alert("Hello"+ fillRepeat);
	for (var x=0; x<fillRepeat; x++)	{
		randX = Math.random();
		posX = Math.floor(randX * canvasWidth);
		posX = posX - (posX % canvasFillWidth);
		randY = Math.random();
		posY = Math.floor(randY * canvasHeight);
		posY = posY - (posY % canvasFillHeight);
		
		// Bepaal de indexwijzer voor kleurkeuze afhankelijk van de richting van het verloop
		switch (canvasColorAlignment)	{
			case 'ltr':
				randColor = randX;
				break;
			case 'rtl':
				randColor = (1-randX);
				break;
			case 'ttb':
				randColor = randY;
				break;
			case 'btt':
				randColor = (1-randY);
				break;
			case 'lttrb':
				randColor = (randX + randY)/2;
				break;
			case 'rttlb':
				randColor = ((1-randX) + randY)/2;
				break;
			case 'lbtrt':
				randColor = (randX + (1-randY))/2;
				break;
			case 'rbtlt':
				randColor = ((1-randX) + (1-randY))/2;
				break;
			default:
				randColor = Math.random();
		}
		fillIndex = Math.floor(randColor * canvasFillStyles.length);

			// vermenging van kleuren 
		if (canvasMixRange)	{
			var spreadRandomizer = Math.random();
			for (var indexOffset=0; indexOffset < canvasMixRanges.length; indexOffset++)	{
				if (spreadRandomizer < canvasMixRanges[indexOffset])	{
						break;
				}
			}
			indexOffset -= neutralRangeIndex;
			fillIndex = Math.min(canvasFillStyles.length - 1, Math.max(0, fillIndex+indexOffset));
		}
		// if (debugNr < 20) {alert( "fillIndex na = " + fillIndex +   " spreadRandomizer = " + spreadRandomizer + " indexOffset  = " + indexOffset);debugNr++;}
		
		ctx.fillStyle = canvasFillStyles[fillIndex];
		if ((canvasColorAlignment != 'none') && canvasDensityAlignedToColor)	{
			if (randColor*Math.random()>canvasDensityAlignedToColorSpeed) {
				ctx.fillStyle = canvasBackgroundFillStyle;		
			} 
		}
		ctx.fillRect(posX, posY, canvasFillWidth, canvasFillHeight);
	}
}