title: Dynamic variable names with Javascript and constructor: cloning an image with EaselJS dynamically to multiple canvases
body: <p>Good day!
  I'm here to ask help about dynamic variable names in Javascript applied to a constructor. It's been much more difficult than expected. I've read about this issue in numerous forums and webpages but I can't find what I'm doing wrong =/</p>
  
  <p>I'm using a HTML5+Javascript library called <a href="http://easeljs.com/" rel="nofollow">EaselJS</a> but my problem it's not related to it but to Javascript syntaxis!
  Here's my problem. I got this code:</p>
  
  <pre><code>stage1 = new Stage(document.getElementById("cnvs1"));
  stage2 = new Stage(document.getElementById("cnvs2"));
  stage3 = new Stage(document.getElementById("cnvs3"));
  </code></pre>
  
  <p>Here, the variables <em>stage</em> have assigned an Stage object which is initialized with canvas id <em>cnvs</em> This line (in the context of the rest of my code) works!
  I'd like to simplify this to a single line with a for like this:</p>
  
  <pre><code>for(i = 0; i &lt; 5; i++){
    //Of course this is wrong!
    stage[i] = new Stage(document.getElementById("cnvs[i]"));
  }
  </code></pre>
  
  <p><a href="http://www.hiteshagrawal.com/javascript/dynamic-variables-in-javascript" rel="nofollow">This link here</a> resumes how this can be done: With <em>eval</em> (a lot of people say it's not recommendable) and with <em>window</em> (recommended) Then if I do this (without the <code>for</code> to simplify even more):</p>
  
  <pre><code>var varname = "stage";
  var i = 1;
  window[varname + i] = new Stage(document.getElementById("cnvs_terminal1"));
  </code></pre>
  
  <p>The code still works. But I can't figure out how to accomplish a similar solution with the canvas id in quotes. These lines of code fail:</p>
  
  <pre><code>var i = 1;
  var varname = "stage";
  var varname2 = 'cnvs1';
  var varname3 = "\"cnvs1\"";
  var varname4 = "\"cnvs1" + i + "\"";
  
  window[varname +i] = new Stage(document.getElementById(window[varname2]));
  window[varname +i] = new Stage(document.getElementById(window[varname3]));
  window[varname +i] = new Stage(document.getElementById(window[varname4]));
  </code></pre>
  
  <p>In these attempts even trying to pass the exact value I need (without the <em>i</em>) it's not helping me!! I'm backslashing quotes because I think they are necessary for the <code>getElementbyId</code>=( =( =(</p>
  
  <p>Now I'm clueless! =(
  I'm certain there is a way to do this, maybe I don't know the syntax, maybe I don't know how to call variables with reference or by value properly, I don't know...
  Please help me, I don't know how to do this simple task!</p>
  
  <p>THANKS A LOT =)</p>
  
  <p><em><strong>EDIT:</em></strong>
  Trying @cHao suggestion I can't do it either! Keeping it simple, I set the for for i to be one only:</p>
  
  <pre><code>for (var i = 1; i &lt;= 1; ++i) {
    //I use only one of the following lines at a time of course, but I'll write here my failing tries all together:
    stage[i] = new Stage(document.getElementById('cnvs'+i));
    stage[i-1] = new Stage(document.getElementById('cnvs'+i));
  
    //Hardcoding the first variable works!
    stage1 = new Stage(document.getElementById('cnvs'+i));
  }
  </code></pre>
  
  <p>Half of the problem it's solved, but what to do with the first variable? =/ THANKS!!!!</p>
  
  <p><em><strong>EDIT 2:</em></strong>
  More detail has been requested! Here's a copy/paste example! Just update the EaselJS and an image paths for this to work!</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="easeljs-0.4.0-26/lib/easel.js"&gt;&lt;/script&gt;       
  
      &lt;script type="text/javascript"&gt; 
        function init() {
          //MY PROBLEM LIES HERE!!
          for (var i = 1; i &lt;= 1; ++i) {
            //This code WORKS
            stage1 = new Stage(document.getElementById('cnvs'+i));
            //This code DOES NOT WORKS
            //stage[i] = new Stage(document.getElementById('cnvs'+i));
            //stage[i-1] = new Stage(document.getElementById('cnvs'+i));
          }
          var images = "images/itzapic.jpg";
          bitmap = new Bitmap(images);
          stage1.addChild(bitmap);
          stage1.update();
          Ticker.addListener(window);
        }
  
        function tick() {
          stage1.update();
        }
      &lt;/script&gt;        
    &lt;/head&gt;
  
    &lt;body onload="init()"&gt; 
      &lt;canvas id="cnvs1" width="140" height="82"&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1><em><strong></em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>_</strong></h1>
  
  <p><em><strong>EDIT 3: SOLVED!</em></strong>
  I'll post the final code for reference to someone who want to use EaselJS to render a single image in as many canvases as needed with the same object. For this you'll need the bitmap.clone() method and arrays for the stages. Thanks to @cHao for helping me out ;)
  The following code will render the same image in all canvases! Update as necessary ;)</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="easeljs-0.4.0-26/lib/easel.js"&gt;&lt;/script&gt;       
  
      &lt;script type="text/javascript"&gt; 
        stage = [];
        function init() {
          for (var i = 1; i &lt;= 6; ++i) {
            stage[i-1] = new Stage(document.getElementById('cnvs'+i));
          }
          var images = "images/itzapic.jpg";
          bitmap = new Bitmap(images);
          stage[0].addChild(bitmap);
          for (var i = 1; i &lt;= 5; ++i) {
            stage[i].addChild(bitmap.clone());
          }
          stage[0].update();
          Ticker.addListener(window);
          }
  
          function tick() {
          for (var i = 0; i &lt; stage.length; ++i) {
            stage[i].update();
          }
        }
  &lt;/script&gt;        
  &lt;/head&gt;
  
    &lt;body onload="init()"&gt; 
      &lt;canvas id="cnvs1" width="140" height="82"&gt;&lt;/canvas&gt;
      &lt;canvas id="cnvs2" width="140" height="82"&gt;&lt;/canvas&gt;
      &lt;canvas id="cnvs3" width="140" height="82"&gt;&lt;/canvas&gt;
      &lt;canvas id="cnvs4" width="140" height="82"&gt;&lt;/canvas&gt;
      &lt;canvas id="cnvs5" width="140" height="82"&gt;&lt;/canvas&gt;
      &lt;canvas id="cnvs6" width="140" height="82"&gt;&lt;/canvas&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>