City/Street/Unit

city/street/unit

<canvas id="c0" showsrc>

function draw() {

 c = document.getElementById("c0");
 ctx = c.getContext('2d');
 // rows of streets
 for (r=0; r<8; r++) {
   ctx.save();
   for (c=0; c<10; c++) {
     // a single housing unit
     ctx.strokeRect(0, 0, 10, 10);
     ctx.translate(10, 0);
   }
   ctx.restore();
   ctx.translate(0, 30);
 }

} </canvas>

city/street/unit

<canvas id="c1" showsrc> function unit () {

 // semi-circular unit
 ctx.beginPath();
 ctx.arc(5, 5, 5, 0, Math.PI, false);
 ctx.closePath();
 ctx.stroke();

}

function street () {

 // a linear row of houses
 ctx.save();
 var numhouses = Math.floor(Math.random()*15);
 for (c=0; c<numhouses; c++) {
   unit();
   ctx.translate(10, 0);
 }
 ctx.restore();

}

function city (l) {

 // rows of streets
 for (x=0; x<12; x++) {
   street();
   ctx.translate(0, 20);
 }

}

function draw() {

 c = document.getElementById("c1");
 ctx = c.getContext('2d');
 city();

} </canvas>

city/street/unit

<canvas id="c2" showsrc> function unit () {

 // semi-circular unit
 ctx.beginPath();
 ctx.arc(5, 5, 5, 0, Math.PI, false);
 ctx.closePath();
 ctx.stroke();

}

function street () {

 // a linear row of houses
 ctx.save();
 for (c=0; c<10; c++) {
   unit();
   ctx.translate(10, 0);
 }
 ctx.restore();

}

function city (l) {

 // rows of streets
 for (x=0; x<8; x++) {
   street();
   ctx.translate(0, 30);
 }

}

function draw() {

 c = document.getElementById("c2");
 ctx = c.getContext('2d');
 city();

} </canvas>

radial city

<canvas id="c3" showsrc> function unit () {

 // a single housing unit
 ctx.beginPath();
 ctx.arc(5, 5, 5, 0, Math.PI, false);
 ctx.closePath();
 ctx.stroke();
 // ctx.strokeRect(0, 0, 10, 10);

}

function street () {

 // a linear row of houses
 ctx.save();
 for (c=0; c<10; c++) {
   unit();
   ctx.translate(10, 0);
 }
 ctx.restore();

}

function street (r) {

 // a curved row of houses
 var length = Math.PI * r,
   numunits = length/10,
   step = length/numunits,
   turn = Math.PI/(numunits-1);

 ctx.save();
 ctx.translate(-r, 0);
 ctx.rotate(-Math.PI/2);
 for (c=0; c<numunits; c++) {
   unit();
   ctx.translate(step, 0);
   ctx.rotate(turn);
 }
 ctx.restore();

}

function city (l) {

 // rows of streets
 ctx.translate(125, 125);
 for (var r=30; r<120; r+=20) {
   street(r);
 }

}

var c, ctx; function draw() {

 c = document.getElementById("c3");
 ctx = c.getContext("2d");
 city();

} </canvas>