javascript - html5 canvas array of images- draw image to canvas - Stack Overflow

admin管理员组

文章数量:1415120

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?

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?

• javascript
• html5-canvas
• drawimage

Share Improve this question Follow edited May 9, 2012 at 10:07 Someone2088 asked May 9, 2012 at 9:38 Someone2088Someone2088 14122 gold badges77 silver badges1616 bronze badges 4

• creating a JSFiddle will help us – frosty Commented May 9, 2012 at 9:42
• Sorry, I don't know what a JSFiddle is? How do I create one? – Someone2088 Commented May 10, 2012 at 22:43
• Sorry. There is a cool site called JSFiddle. You can go there and make a simple mock up of your code, and then you can share that with us, and we can troubleshoot your issue easier. – frosty Commented May 10, 2012 at 22:54
• I've tried making a JSFiddle... but I don't know if what I've done is right... The URL to the page I made on that site is: jsfiddle/someone2088/22XgR but it doesn't seem to be displaying the page properly in the preview panel. Or at least it doesn't appear to be displayed the same way as when I view the page in a browser. The URL for my live page is: users.aber.ac.uk/eef8/iwp/assignment/workingVersion10-05-2012/… You'll have to click Start first, when it updates, only the cross has an event listener – Someone2088 Commented May 11, 2012 at 1:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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!

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.

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

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

本文标签： javascripthtml5 canvas array of images draw image to canvasStack Overflow