Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2012
    Location
    RI, USA
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Canvas Drawing Problems....

    Hello, Codingforums. I have looked on Google for a solution, done a handful of things, and cannot get my script to draw to the page.

    Code:
    <html>
    <head>
    <script type="text/javascript" src="imageFuncs.js"></script>
    <script type="text/javascript">
    
    showImages = function() {
    	var drawingCanvas = document.getElementById("map");
    	// Check the element is in the DOM and the browser supports canvas
    	if (drawingCanvas.getContext) {
    		var ctx = drawingCanvas.getContext("2d");
    		var imageSources = new Array("map.jpg");
    		var images = new Array();
    		images = loadImages(imageSources);
    		
    		for (var i = 0; i < images.length; i++) {
    			var img = new Image();
    			img.src = images[i].src;
    			img.onload = function(){
    				ctx.drawImage(img,0,0,screen.width,screen.height);
    			}
    		}
    	}
    }
    </script>
    </head>
    <body onload="showImages()">
    <canvas id="map">Your browser does not support canvases...</canvas>
    </body>
    </html>
    The problem appears on the ctx.drawImage(img,0,0,screen.width,screen.height); line. I read that the drawImage method will not draw the image if the images are not loaded, which is why I tried an onload event for img.

    When I run the code the way it is now, I get a attempt to run compile-and-go script on a cleared scope error from Firebug. When I remove the onload event, the script runs without errors. Either way, no image is drawn on the page. Any help?

    If it helps, this is the loadImages function that I used to get the array of loaded image objects:

    Code:
    function loadImages(sources){
        var images = new Array();
        var loadedImages = 0;
        var numImages = 0;
        for (var src in sources) {
            numImages++;
        }
        for (var src in sources) {
            images[src] = new Image();
            images[src].src = sources[src];
        }
    	return images;
    }
    Last edited by Alternative; 01-16-2012 at 07:07 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Hm, it seems your loadImages method is mixing arrays (indexed)with object literals (associative array)

    Inside of the function you access the object literal using for example images["map.jpg"] which will lead to something like
    Code:
    images = { "map.jpg": new Image()}
    So you get an object literal in the end. You cannot access object literals using indexes, the .length will always be 0

  • #3
    New Coder
    Join Date
    Jan 2012
    Location
    RI, USA
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for the reply, devnull.

    I tried adding a new index to the array to try and get the counting part right.

    Code:
    function loadImages(sources){
        var images = new Array();
        var loadedImages = 0;
        var numImages = 0;
        for (var src in sources) {
            numImages++;
        }
        for (var src in sources) {
            images[src][0] = new Image();
            images[src][0].src = sources[src];
        }
    	return images;
    }
    When I tried this, I got an image[src] not defined error. Am I approaching the problem in the right way? I had the code write the value of src, which is 0 (and should be a valid array reference, no?).

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Skrew my last answer ... I never used for(... in ...) in my life and always expected it to be more of a "foreach". Even more from your variable name I expected "src" to contain the src string rather than the current array index.

    So your first code seems to be correct except for the screen.width, screen.height part. Why are you using this? Did you try
    Code:
    ctx.drawImage(img,0,0,img.width,img.height);
    instead?

  • #5
    New Coder
    Join Date
    Jan 2012
    Location
    RI, USA
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, I tried that code, and it gives the same results. I have just tried this:

    Code:
    function loadImages(sources){
        var images = new Array();
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for (var i = 0; i < sources.length; i++) {
            numImages++;
        }
        for (var i = 0; i < numImages; i++) {
            images[i] = new Image();
            images[i].src = sources[i];
        }
    	return images;
    }
    and

    Code:
    var drawingCanvas = document.getElementById("map");
    	// Check the element is in the DOM and the browser supports canvas
    	if (drawingCanvas.getContext) {
    		var ctx = drawingCanvas.getContext("2d");
    		var imageSources = new Array("map.jpg");
    		var images = new Array();
    		images = loadImages(imageSources);
    		
    		for (var i = 0; i < images.length; i++) {
    			var img = new Image();
    			img.src = images[i].src;
    			img.onload = function(){
    				ctx.drawImage(img,0,0,screen.width,screen.height);
    			}
    		}
    	}
    I get an attempt to run compile-and-go script on a cleared scope when I try to call ctx.drawImage(img,0,0,screen.width,screen.height);.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    There is no such error with your code (when using img.width and img.height ... otherwise it will strech the images into the canvas using screen width and height) on Firefox 9.0.1

    Example: http://jsbin.com/ofesoc

    Hint: If you hover the mouse over the example page you'll see a button on the top right corner saying "Edit on jsbin.com". You can use this button to see the full page source (HTML, Javascript and CSS)

  • Users who have thanked devnull69 for this post:

    Alternative (01-17-2012)

  • #7
    New Coder
    Join Date
    Jan 2012
    Location
    RI, USA
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I found the problem. It acted up because I called getElementById -before- I defined the canvas inside the body. You have to use HTML to define the canvas first, and then use <script> tags to do the work, it seems...It doesn't make much sense to me, however. I even made the script launch after body onload finished...odd.

    Thank you for your help, devnull.

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    This is not odd ... this is the number one beginner's error :-)

    The document is processed top down by the browser (including scripts). Scripts will be executed immediately upon load. If you have executable scripts above the HTML elements that are being accessed by that code, it just won't work. This is why the Javascript gods introduced onload and similar constructs.


  •  

    Posting Permissions

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