www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problem preloading images

  1. #1
    Join Date
    Aug 2013
    Posts
    3

    Problem preloading images

    I am trying to preload a list of images (actually only 2 so far) but am getting the following error:

    Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.

    Here it is my HTML code:

    PHP Code:
    <!DOCTYPE HTML>
    <
    html>
    <
    head>

        <
    META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    </
    head>

    <!-- 
    body onLoad="initLobby()" style="margin:0px;border:0px;padding:0px;width:320px;height:340px;" -->

    <
    body onLoad="PreloadImages();" style="margin:0px;border:0px;padding:0px;width:320px;height:340px;">
    <
    canvas id="the-multiplication-game" width="320" height="340">

    </
    canvas>

    <
    script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
    <script src="js/util.js"></script>
    <script src="js/lobby.js"></script>
    <script src="js/begin.js"></script>
    <script src="js/userclicked.js"></script>

    <!-- <script src="create-rooms.js"></script>
    <script src="themultiplicationgame.js"></script> -->

    </body>
    </html> 
    And here it is my JS code:

    PHP Code:
    var canvas document.getElementById('the-multiplication-game');
    var 
    context canvas.getContext('2d');

    var 
    myimages = new Array();
    var 
    LoadedImages 0;

    var 
    image_list = new Array();
    image_list[0] = 'bg.jpg';
    image_list[1] = 'game_name.png';

    function 
    PreloadImages()
    {
        if (
    document.images)
        {
            for (var 
    i=0;i<=image_list.length-1;i++)
            {
                
    myimages[i] = new Image;
                
    myimages[i].src "images/"+image_list[i];
                
    myimages[i].onload = function()
                {
                    
    LoadedImages++;
                    if (
    LoadedImages == image_list.length)
                        for (var 
    j=0;j<=myimages.length-1;j++)
                            
    context.drawImage(myimages[j].src,0,0);
                }
            }
        }

    Any idea about what I am doing wrong?

    PS: The error is happening on line context.drawImage(myimages[j].src,0,0);

    Thanks!

  2. #2
    Join Date
    May 2014
    Posts
    648
    You shouldn't be passing .src, you should just be passing the image element.

    context.drawImage(myimages[j],0,0);

    That's your bug...

    Some advice, don't waste time saying "new Array" when [] will do the same job... don't waste time saying "var" on every new var when you can pass a comma delimited list. Don't introduce an extra subtraction to your loop check when you could just do "<" instead of "<=".

    Code:
    var
    	canvas = document.getElementById('the-multiplication-game'),
    	context = canvas.getContext('2d'),
    	myimages = []; 
    	LoadedImages = 0,
    	image_list = ['bg.jpg', 'game_name.png'];
    
    function PreloadImages() { 
    	if (document.images) { 
    		for (var i = 0; i < image_list.length; i++) { 
    			myimages[i] = new Image; 
    			myimages[i].src = 'images/' + image_list[i]; 
    			myimages[i].onload = function() { 
    				if (++LoadedImages == image_list.length) 
    					for (var j = 0; j < myimages.length; j++) 
    						context.drawImage(myimages[j], 0, 0); 
    			} 
    		} 
    	} 
    }
    Should do the job...

    Also, some other advice: don't declare width and height on BODY, it's unreliable cross browser (IE will still screw it up and random intervals), don't declare STYLE in the markup (Even in testing, just makes for sloppy coding) and as a Scripting only event you should probably hook 'onload' instead of using the attribute, just in case some other script (since you seem to be loading a slew of them) interferes with that.

    I probably would also generate the canvas from the scripting as it's a scripting only element and as such has no business in the markup as a tag -- but that's more my dislike for how STUPID HTML 5's implementation is.

  3. #3
    Join Date
    May 2014
    Posts
    648
    Oops, myImages = [] should have a comma after it, not a semicolon.

  4. #4
    Join Date
    Aug 2013
    Posts
    3
    Hey deathshadow, what an excellent response!

    Thank you for all the valuable tips. I will be more careful with such details from now on.

    Again, thank you very very much!


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



Recent Articles