Canvas Drawing Problems....

Alternative

01-16-2012, 06:04 PM

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.

<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? :confused:

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

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

devnull69

01-16-2012, 10:56 PM

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

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

Alternative

01-17-2012, 04:49 AM

Thank you for the reply, devnull.

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

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?).

devnull69

01-17-2012, 06:34 AM

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

ctx.drawImage(img,0,0,img.width,img.height);

instead?

Alternative

01-17-2012, 01:22 PM

Yes, I tried that code, and it gives the same results. I have just tried this:

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

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

devnull69

01-17-2012, 02:11 PM

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)

Alternative

01-17-2012, 05:21 PM

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.

devnull69

01-17-2012, 06:14 PM

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.