title: How to draw rectangle spiral?
body: <p>I'm trying to draw a one pixel width line going form the canvas center and evolving with the canvas width/height ratio as it's drawn.</p>
  
  <pre><code>var x = 0;
  var y = 0;
  var dx = 0;
  var dy = -1;
  var width = 200;
  var height = 40;
  //var i = width * height;
  var counter = 0;
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext('2d');
  
  
  
  setInterval(function(){
      //for (i = Math.pow(Math.max(width, height), 2); i&gt;0; i--) {
  
      if ((-width/2 &lt; x &lt;= width/2)  &amp;&amp; (-height/2 &lt; y &lt;= height/2)) {
          console.log("[ " + x + " , " +  y + " ]");
          ctx.fillStyle = "#FF0000";
          ctx.fillRect(width/2 + x, height/2 - y,1,1);
      }
  
     if (x === y  || (x &lt; 0 &amp;&amp; x === -y)  || (x &gt; 0 &amp;&amp; x === 1-y) || ( -width/2 &gt; x &gt; width/2 ) || ( -height/2 &gt; y &gt; height/2 ) ) {
         // change direction
         var tempdx = dx;
         dx = -dy; 
         dy = tempdx;
  
     }
     counter += 1;
     //alert (counter);
     x += dx;
     y += dy;       
     }, 1);
  </code></pre>
  
  <p>I want the spiral to evolve as such:</p>
  
  <p><img src="https://i.stack.imgur.com/InvNk.jpg" alt="spiral pretended evolution"></p>
  
  <p>I'd like to be able to get the ratio between height and width on the equation, so I don't need to calculate the coordinates for points outside the canvas. Also, the purpose is for it to adjust the spiral drawing to the canvas proportions.</p>
  
  <p>Any help would be appreciated.</p>