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?

Sorry, I don't know what a JSFiddle is? How do I create one? — Someone2088
– 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
– 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.net/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
– Someone2088, Commented May 11, 2012 at 1:41

dougajmcdonald · Accepted Answer · 2012-05-09 09:43:53Z

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!

answered May 9, 2012 at 9:43

dougajmcdonald

20.2k12 gold badges61 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Someone2088 Over a year ago

Thanks for your reply. I've done what you said, but for some reason, only the word is drawn to the canvas- the image isn't. I've updated my original post to show what I've done.

dougajmcdonald Over a year ago

I think the only thing which would stop the image being drawn would be the path. Where are you images located in relation to the website root? In firefox, in firebug, you should be able to see GET requests being made to '1.png' etc. I would expect those are being shown as 404's?

Someone2088 Over a year ago

I thought 404's were 'page not found' errors? They're not 404s, the image just isn't being displayed. The image is a .png file, and it's in the same root directory as the webpage that I'm trying to display it on. It's got something to do with the fact that I'm trying to display the image on the HTML5 canvas, but I just can't work out what the problem is.

dougajmcdonald Over a year ago

404's are effectively page not found, but they can occur from any HTTP request if the target isn't there. Assuming your images are there and the GET request returns a 200 then yeah the issue will be in the code, what is 'drawGameElements();' doing in your code?

Noble-Surfer · Accepted Answer · 2012-05-09 12:53:37Z

0

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.

answered May 9, 2012 at 12:53

Noble-Surfer

3,19213 gold badges82 silver badges129 bronze badges

3 Comments

Noble-Surfer Over a year ago

Ok, somehow it seems to have started working now. Thanks for all your help

Noble-Surfer Over a year ago

Actually, it only seems to work sometimes... sometimes it takes a number of clicks on the canvas before the iamge appears, other times it doesn't appear at all... it seems to be completely random as to whether the image appears on the first click (click on the button)- as it should, or whether it appears on a subsequent click on the canvas, or whether it doesn't appear at all... I'm really confused by this. Any suggestions?

bluevial Over a year ago

The image isn't displayed because it hasn't yet been gathered by the server(this also happens with specialty fonts). Each time you attempt to load an image, that hasn't been loaded before, a GET request is sent. Meaning that some images take a bit of time before they can be used. An easy way to work around this is to either create a setTimeout() every time you load an image, or to cycle though and load all images at the beginning, so that they will be there when you want call them.

WikiPlugs · Accepted Answer · 2013-02-19 15:41:35Z

0

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

answered Feb 19, 2013 at 15:41

WikiPlugs

111 bronze badge

Comments

Ângelo Magno de Jesus · Accepted Answer · 2019-11-28 20:26:41Z

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

Collectives™ on Stack Overflow

html5 canvas array of images- draw image to canvas

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related