html5 canvas array of images- draw image to canvas

Question

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?

Answer 1

I solved this using recursive calls on the method img.onload to draw images. E.g.:

    var cx = 10;//x initial position to draw
    var cy = 10;//y initial position to draw
    var space = 300; //distance between images to draw
    var imageArray = new Array();
    imageArray[0] = "1.png";
    imageArray[1] = "2.png";
    imageArray[2] = "3.png";
    //etc....
    //build a Image Object array
    var imgs = new Array();
    for(i = 0; i < imageArray.length; i++){
     imgs[i] = new Image();
     imgs[i].src = imageArray[i];//attention if the images are in a folder 
    }
    var ri = 1;//index of images on the array
    imgs[0].onload = function(){
     context.drawImage(imgs[0], cx, cy);
     cy += imgs[0].height + space;
     callDraw(context, imgs, cx, cy, ri, space);
    }

The recursive function is defined as following:

    function callDraw(context, imgs, cx, cy, ri, space){
     if(ri == imgs.length) 
      return;
     context.drawImage(imgs[ri], cx, cy);
     cy += imgs[ri].height + space;
     ri++;
     callDraw(context, imgs, cx, cy, ri, space);
    }

Answer 2

This is an old one but the reason why the image is not showing is probably because you have to call onLoad then set the src like so:

var img = new Image();
img.onLoad = function() {ctx.drawImage(img, 100, 30);};
img.src = imageArray[0];

Answer 3

This is the code for drawGameElements()

/* This function draws the game elements */
        function drawGameElements(){

            /* Draw a line for the 'score bar'. */
            context.moveTo(0, 25);
            context.lineTo(700, 25);
            context.stroke();

            /* Draw current level/ total levels on the left, and current score on the right. */
            context.font = "11pt Calibri"; /* Text font & size */
            context.strokeStyle = "black"; /* Font colour */
            context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
            context.strokeText(currentScore, 650, 15);
        }

Literally, all it's doing is drawing a 'score bar' on the canvas, which is just a line across the top, the current level/ total levels, and the user's current score. I don't think this is the issues, as the elements that this function is meant to display are being displayed correctly.

Answer 4

You need to create a javascript image with it's src set to your array value

        var img = new Image();
        img.src = imageArray[0];

        ctx.drawImage(img, 100, 30);

Without doing that you're trying to ask the canvas to draw a string of "1.png" for example which is not what you're after here!