Results 1 to 3 of 3

Thread: JavaScript iteration

  1. #1
    Join Date
    Apr 2012

    JavaScript iteration


    I want to use JavaScript to draw a series of images onto an HTML5 canvas. I have the following while loop, which I had hoped would draw all of the images to the canvas, however, it is currently only drawing the first one:

    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 */
    				/*Draw the elements needed for level 1 (26/04/2012) */
    				var fileName = 1;
    				var imagePositionX = 20;
    				var imagePositionY = 30;
    				while(fileName < 11){
    					/*Create an array of images here, move to next element of array on each iteration */
    					var numbers = new Array();
    					numbers[0] = "1.png"
    					numbers[1] = "2.png"
    					numbers[3] = "3.png"
    					numbers[4] = "4.png"
    					numbers[5] = "5.png"
    					image.src = fileName+".png";
    					image.src = numbers[0];
    					image.onload = function(){
    						context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
    					fileName = fileName+1;
    					imageY = imageY+20;
    					console.dir(fileName); /* displays in the console- helpful for debugging */
    To talk through what I had hoped this function would do:

    1. Load each of the images into a different element of the array (so 1.png would be in numbers[0], 2.png in numbers[1], etc. )

    2. It would then take the global variable 'image', and assign its source to the contents of numbers[0]

    3. Then draw that image at the specified position on the canvas.

    4. Then increment the value of the variable fileName by 1, giving it a value of '2'

    5. Next it would increment the value of the Y co-ordinate where it will draw the image on the canvas by 20- moving the position of the image to be drawn down by 20 pixels

    6. After that it would go back to the start of the loop and draw the next image (2.png) on the canvas in a position that is 20 pixels below the position of the first image that was drawn.

    7. It should continue doing this while the value of the variable 'fileName' is less than 11, i.e. it should draw 10 images each new one below the last one that was drawn.

    However, for some reason, my function only draws the first image. Could someone point out what I'm doing wrong, and how I could correct this?

    Thanks very much.

  2. #2
    Join Date
    Aug 2007
    There's a few things I'd suggest. First, initialize all images since this is a game (untested and possibly very poor, you could look for better image preloaders online).
    var filenames = ["image.jpg","srcs.png","here.gif"], images = [], loaded = [];
    for (var i = 0; i < filenames.length; i++) {
      images[i] = new Image();
      images[i].src = filenames[i];
      loaded = false;
      (function (x) {
        images[x].onload = function () {
          loaded[x] = true;
          for (var i = 0; i < loaded.length; i++) {
             if (!loaded[x]) return;
          allLoaded(); // Function called when images loaded
      })(i); // Lazy evaluation
    Then, you can greatly simplify your drawing code, by just using a basic for loop and calling context.drawImage.

    Secondly, if you are drawing these images onto the same place every time many times a second, it could be more efficient to draw them onto another canvas that you don't show to the screen, and just add that on to this canvas, as explained here.
    Last edited by Declan1991; 04-26-2012 at 05:28 PM.

  3. #3
    Join Date
    Apr 2012
    Hi, I only want to draw the images once, and the idea of using a loop was simply so that I didn't have to write out the full line for drawing an image ten times- the images I want to draw are simply the numbers 1-10, and I had hoped that using a loop, I could update the X location at which to draw the images when I update the image filename.

    That way, the loop would draw image 1 at X, Y, then image 2 at X+10, Y, etc until I had a row of the images 1-10.

    I know that the game will be very poor, but this is only my second time using the HTML5 canvas (I'm at uni), so it's just an assignment for learning how to use it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center