› › Experimento con canvas

Ésta mañana estaba enredando tratando de crear un generador de patterns (imágenes repetitivas para fondos, etc) con javascript y canvas. Pero al intentar hacerla, dado a un error (aumentaba la x mientras disminuía la y) ha salido una forma extrañísima, que me gustaría dejar constatado:

Figura generada con canvas

La forma está relacionada con con la proporcionalidad inversa.
Os paso el código por si alguien quiere generarlas con otro color, más separación, etc (tenéis que llamar a la función generardesde la consola).

<html><head></head><body>
 <img src="about:blank" id="the-image">
 <script type="text/javascript">
     var canvas = document.createElement("canvas"),
         ctx = canvas.getContext("2d"),
         imagen = document.getElementById("the-image");
  function generar(dimension, color, espacio){
     var lineas, espacioEntreLineas,
         alto = dimension,
         ancho = dimension,
         x = 0, 
         y = alto;

     espacio = espacio || dimension/2;

     lineas = dimension/espacio -1;
     espacioEntreLineas = dimension/lineas;

     canvas.height = alto;
     canvas.width = ancho;
     ctx.beginPath();
     ctx.strokeStyle = color;

     function draw(){
         ctx.moveTo(0, y);
         ctx.lineTo(x, 0);
     }

     for( var i = 0; i < lineas; i ++ ){
         x += espacioEntreLineas;
         y -= espacioEntreLineas; 
         draw();
     };
     ctx.stroke();
     imagen.src = canvas.toDataURL("image/png");
  }
 </script>
</body></html>

Yo mientras seguiré intentándolo