title: JavaScript - How to draw few shapes with a space between them, by using a for loop and canvas
body: <p>I'm trying to draw a line of squares by using a for loop.
  When I say line I mean that I want one square standing next to other one but with a space between them.</p>
  
  <p>I tried the next code -</p>
  
  <p>The html part -</p>
  
  <pre><code>&lt;canvas id="myCan" height="300px" width="300px"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>and the script part -</p>
  
  <pre><code>        $(document).ready(function () {
          var canvas = document.getElementById("myCan");
          var ctx = canvas.getContext("2d");
  
  
          var positionx = 50;
          var positiony = 50;
          var i = 0;
          for (i; i &lt; 20; i++) {
  
              ctx.fillStyle = "rgb(255, 0, 0)";
              ctx.fillRect(positionx, positiony, 50, 50);
  
              positionx += 2;
  
  
          }
  
  
      });
  </code></pre>
  
  <p>The thing is that I'm getting a simple Line- meaning there's no space between the squares.</p>
  
  <p>How can i fix it?</p>
  
  <p>Thanks for any kind of help</p>