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.

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.

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:

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);

        }

but for some reason, when I view the page in the browser, in the firebug console, I get the error:

Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
context.drawImage(imageArray[0], 100, 30);

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?

* EDIT *

I've changed the code below the to arrays to:

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);

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.

Any ideas?