title: html5 canvas array of images- draw image to canvas
body: <p>I'm using the HTML5 canvas and JavaScript to make a basic game, and I have an array of images for the numbers 1-10, and then have another array for the Welsh words for the numbers 1-10.</p>
  
  <p>What I want to do is select a random element from the images array and a random element from the words array and display them both on the canvas. The user will then click on a tick to indicate if the word represents the correct number, or a cross if it doesn't.</p>
  
  <p>The problem is that I'm not sure how to draw an array element to the canvas. I have the following code, which I was going to use just to test that it works, before I think about how to make the elements drawn be chosen at random:</p>
  
  <pre><code>function drawLevelOneElements(){
              /*First, clear the canvas */
              context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
              /*This line clears all of the elements that were previously drawn on the canvas. */
              /*Then redraw the game elements */
              drawGameElements();
              /*Now draw the elements needed for level 1 (08/05/2012) */
              /*First, load the images 1-10 into an array */
              var imageArray = new Array();
              imageArray[0] = "1.png";
              imageArray[1] = "2.png";
              imageArray[2] = "3.png";
              imageArray[3] = "4.png";
              imageArray[4] = "5.png";
              imageArray[5] = "6.png";
              imageArray[6] = "7.png";
              imageArray[7] = "8.png";
              imageArray[8] = "9.png";
              imageArray[9] = "10.png";
  
              /*Then create an array of words for numbers 1-10 */
              var wordsArray = new Array();
              wordsArray[0] = "Un";
              wordsArray[1] = "Dau";
              wordsArray[2] = "Tri";
              wordsArray[3] = "Pedwar";
              wordsArray[4] = "Pump";
              wordsArray[5] = "Chwech";
              wordsArray[6] = "Saith";
              wordsArray[7] = "Wyth";
              wordsArray[8] = "Naw";
              wordsArray[9] = "Deg";
  
              /*Draw an image and a word to the canvas just to test that they're being drawn */
              context.drawImage(imageArray[0], 100, 30);
              context.strokeText(wordsArray[3], 500, 60);
          }
  </code></pre>
  
  <p>but for some reason, when I view the page in the browser, in the firebug console, I get the error:</p>
  
  <blockquote>
    <p>Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
    context.drawImage(imageArray[0], 100, 30);</p>
  </blockquote>
  
  <p>I'm not sure if this is how I'm meant to access the image in array element 0... could someone please point out what I'm doing wrong?</p>
  
  <p><strong>* EDIT *</strong></p>
  
  <p>I've changed the code below the to arrays to:</p>
  
  <pre><code>var image1 = new Image();
              image1.src = imageArray[0];
  
              /*Draw an image and a word to the canvas just to test that they're being drawn */
              context.drawImage(image1, 100, 30);
              context.strokeText(wordsArray[3], 500, 60);
  </code></pre>
  
  <p>but for some reason, the only the element from the wordsArray is drawn to the canvas- the image element from imageArray isn't displayed at all.</p>
  
  <p>Any ideas?</p>