title: Draw an Array of different Images on an array of different xy-coordinates, in order
body: <p>I have a canvas:</p>
  <pre><code>&lt;canvas id=&quot;canvas&quot; width=&quot;500px&quot; height=&quot;500px&quot;&gt;&lt;/canvas&gt;
  </code></pre>
  <p>I have an array of Ribbon Images being pulled from a selection of checkboxes on my page:</p>
  <pre><code>&lt;th&gt;&lt;input value=&quot;0001&quot; class=&quot;Ribbons&quot; type=&quot;checkbox&quot; onchange=&quot;ReDraw()&quot;&gt;&lt;/th&gt;
  &lt;th&gt;&lt;input value=&quot;0002&quot; class=&quot;Ribbons&quot; type=&quot;checkbox&quot; onchange=&quot;ReDraw()&quot;&gt;&lt;/th&gt;
  &lt;th&gt;&lt;input value=&quot;0003&quot; class=&quot;Ribbons&quot; type=&quot;checkbox&quot; onchange=&quot;ReDraw()&quot;&gt;&lt;/th&gt;
  &lt;th&gt;&lt;input value=&quot;0004&quot; class=&quot;Ribbons&quot; type=&quot;checkbox&quot; onchange=&quot;ReDraw()&quot;&gt;&lt;/th&gt;
  &lt;th&gt;&lt;input value=&quot;0005&quot; class=&quot;Ribbons&quot; type=&quot;checkbox&quot; onchange=&quot;ReDraw()&quot;&gt;&lt;/th&gt;
  
  
  let RibbonsArray = Array.from(document.getElementsByClassName(&quot;Ribbons&quot;));
  let CheckedRibbons = RibbonsArray.filter(element =&gt; element.checked == true);
  </code></pre>
  <p>I have a few arrays of x/y coordinates:</p>
  <pre><code>var arr1 =[
  [122, 235]
  ];
  var arr2 =[
  [69, 235],
  [175, 235]
  ];
  var arr3 =[
  [16, 235],
  [122, 235],
  [228, 235]
  ];
  var arr4 =[
  [122, 220],
  [16, 250],
  [122, 250],
  [228, 250]
  ];
  var arr5 =[
  [69, 220],
  [175, 220],
  [16, 250],
  [122, 250],
  [228, 250]
  ];
  </code></pre>
  <p>I have the following script:</p>
  <pre><code>function ClearLeft(){
      let clearLeft = canvas.height - 5;
      ctx.fillRect(2, 2, 345, clearLeft);
  };
  
  function ReDraw(){
      ClearLeft();
      //RIBBONS
      let CheckedRibbons = RibbonsArray.filter(element =&gt; element.checked == true);
          if (CheckedRibbons.length == arr1.length){
              CheckedRibbons.forEach(Ribbon =&gt; {
                  let x = arr1[0][0];
                  let y = arr1[0][1];
                  let img = new Image();
                  img.src = `Ribbons/${Ribbon.value}.png`
                  img.addEventListener('load', () =&gt; {
                  ctx.drawImage(img, x, y);
                  });
              });
          } else if (CheckedRibbons.length == arr2.length){
          //When 2 Ribbons are checked -&gt; Draw Ribbon 1 at arr2[0] which is [69, 235].
          //                           -&gt; Draw Ribbon 2 at arr2[1] which is [175, 235].
  
          } else if (CheckedRibbons.length == arr3.length){
          //When 3 Ribbons are checked -&gt; Draw Ribbon 1 at arr3[0] which is [16, 235].
          //                           -&gt; Draw Ribbon 2 at arr3[1] which is [122, 235].
          //                           -&gt; Draw Ribbon 3 at arr3[2] which is [228, 235].
          
          }
  };//REDRAW ENDS
  </code></pre>
  <p>As you can see for the case where 2 or 3 Ribbons are selected, I'm trying to figure out a way to draw each Ribbon sitting in &quot;CheckedRibbons&quot;....in order....at each corresponding index of the array that matches in length (that's a mouthful eh, I hope I didn't mess that up).
  I have tried nested &quot;forEach&quot; in different configurations, I tried playing around with the indices. I just can't wrap my head around this.</p>