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

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!