Recursive square

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Het "Droste" Effect

Drawing hands

wikipedia:M. C. Escher

Recursive Square

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

 ctx.strokeRect(0, 0, l, l);
 if (l > 10) {
   square(l-20);
 }

}

var c, ctx; function draw() {

 c = document.getElementById("c1");
 ctx = c.getContext("2d");
 square(250);

} </canvas>

Recursive Square

<canvas id="c2" showsrc> function square (x, y, l) {

 ctx.strokeRect(x, y, l, l);
 if (l > 10) {
   var q = l/2;
   square(x, y, q);
   square(x, y+q, q);
   square(x+q, y, q);
   // square(x+q, y+q, q);
 }

}

var c, ctx; function draw() {

 c = document.getElementById("c2");
 ctx = c.getContext("2d");
 square(0, 0, 250);

} </canvas>