title: Moving group of objects at the same time in canvas
body: <p>My problem is that I have no idea how to implement group of objects, in my situation, group of rectangles moving all at the same time. Well, I implemented easily moving one rectangle with specific direction which you can see below from my code. Also I tried to add an array with group of rectangles. So again my question is how to implement group of rectangles (3 rows 3 columns, 9 of them, for instance) to move the same way how my one rectangle is moving in the code below????? So basically very right side of group and very left side of the group will hit the border while column in the middle of 3X3 will stay moving between two columns of 3X3.....Any help will appreciated. Thank you...</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Spaceman Invaders&lt;/title&gt;
  
      &lt;script&gt;
      window.onload = function() {
  
          var canvas = document.getElementById("screen");
          context = canvas.getContext("2d");
  
          context.fillStyle="black";
          context.fillRect(0,0,canvas.width, canvas.height);
  
          context.fillStyle = "red";
          context.fillRect(30, 100, 20 , 20);
  
          var posx = 27;
          var posy = 100;
          var go_right = true;
          var go_down = false;
               if (canvas.getContext) {
  
                 /*   var array = [];
  
                    array.push(new Shape(20, 0, 50, 50, "red"));
                    array.push(new Shape(20, 60, 50, 50, "red"));
                    array.push(new Shape(20, 120, 50, 50, "red"));
                    array.push(new Shape(80, 0, 50, 50, "red"));
                    array.push(new Shape(80, 60, 50, 50, "red"));
                    array.push(new Shape(80, 120, 50, 50, "red"));
                    array.push(new Shape(140, 0, 50, 50, "red"));
                    array.push(new Shape(140, 60, 50, 50, "red"));
                    array.push(new Shape(140, 120, 50, 50, "red"));*/
  
  
          setInterval( function() {
  
  
  
              if (!go_down) {
                  if(posx &lt; 250 &amp;&amp; go_right) {
                      posx += 3;
                  } else if(posx &lt; 30) {
                      go_right = true;
                      go_down = true;
                  } else if(!go_right) {
                      posx -= 3;
                  }else {
                      go_right = false;
                      go_down = true;
                  }
              } else {
                  //if(posy &lt;= 30)
                  posy += 5;
                  go_down = false;
              }
  
  
              context.fillStyle="black";
              context.fillRect(0,0,canvas.width, canvas.height);
  
  
              context.fillStyle = "red";
              context.beginPath();
              context.fillRect(posx, posy, 20 , 20);
              context.fill();
  
  
              }
          , 20);
  
      }
  
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;canvas id="screen" width="300" height="500"/&gt;
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>