рони,
Огромное спасибо за помощь!!!
Вот, набросал собственный вариант, может понадобится кому.
Понимаю, что написано не очень, но все же это первый опыт работы на JS
<!doctype html>
<html>
<head>
<title>canvasExample</title>
<meta charset='utf-8' />
</head>
<body>
<canvas height='320' width='480' style="margin: 0px; border-style: double; padding:0px;" id='example'>Reload</canvas>
<script>
var example = document.getElementById("example"),
ctx = example.getContext('2d');
ctx.fillStyle = "#00F";
function divide(mObj) {
if (mObj.order < 3){
//alert(mObj.x2 + " " + mObj.x1 + " " + mObj.y2 + " " + mObj.y1);
x_div = (mObj.x2-mObj.x1) /2;
y_div = (mObj.y2-mObj.y1) /2;
//x_div = Math.random()*(mObj.x2 - mObj.x1)+mObj.x1;
//y_div = Math.random()*(mObj.y2 - mObj.y1)+mObj.y1;
//левый верхний
mObj.rect1 = new Object();
mObj.rect1.x1 = mObj.x1; mObj.rect1.y1 = mObj.y1; mObj.rect1.x2 = x_div; mObj.rect1.y2 = y_div;
mObj.rect1.order = mObj.order+1;
divide(mObj.rect1);
//правый верхний
mObj.rect2 = new Object();
mObj.rect2.x1 = x_div; mObj.rect2.y1 = mObj.y1; mObj.rect2.x2 = mObj.x2; mObj.rect2.y2 = y_div;
mObj.rect2.order = mObj.order+1;
divide(mObj.rect2);
//левый нижний
mObj.rect3 = new Object();
mObj.rect3.x1 = mObj.x1; mObj.rect3.y1 = y_div; mObj.rect3.x2 = x_div; mObj.rect3.y2 = mObj.y2;
mObj.rect3.order = mObj.order+1;
divide(mObj.rect3);
//правый нижний
mObj.rect4 = new Object();
mObj.rect4.x1 = x_div; mObj.rect4.y1 = y_div; mObj.rect4.x2 = mObj.x2; mObj.rect4.y2 = mObj.y2;
mObj.rect4.order = mObj.order+1;
divide(mObj.rect4);
} else {
ctx.fillStyle = 'rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';
ctx.fillRect(mObj.x1, mObj.y1, mObj.x2-mObj.x1, mObj.y2-mObj.y1);
}
}
var main = new Object(); //создаем основной прямоугольник
main.x1 = 0; main.y1 = 0; main.x2 = 480; main.y2 = 320;
main.order = 0;
divide(main);
</script>
</body>
</html>