Canvas help.

MadnessRed · July 20, 2010

Hi, for some reason my canvas is only drawing some of the images I expect.

test.html

<html>
<head>
<title>Canvas Test</title>
<!-- FOR IE -->
<!--[if IE]><script src="scripts/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="scripts/canvas.js" ></script>
</head>
<body onload="load_treeview();">
<div id="xml_dump" style="display:none;"></div>
<canvas id="treeview" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>

canvas.js

function load_treeview(){

//Load the canvas
var drawingCanvas = document.getElementById('treeview');

// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas.getContext) {
	// Initaliase a 2-dimensional drawing context
	var context = drawingCanvas.getContext('2d');

	//Load the xmlhttp
	if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }
	else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); alert('Please upgrade your browser, this script is designed to be used on HTML complient browsers.');}

	//Get the xml file.
	xmlhttp.open("GET","tree.xml",false);
	xmlhttp.send();
	xmlDoc=xmlhttp.responseXML;

	//Place
	position(xmlDoc.getElementsByTagName("img")[0], context, 0, 0, []);


//Otherwise complain
}else{
	alert('Couldn\'t load canvas, please use a HTML5 complient browser.');
}
}


function position(xml, context, xpos, ypos, images){

//Get the children
var children = xml.childNodes;

//Total width
var width = 0;

//Are there children?
if(children.length > 0){
	//Loop through children
	for (i = 0; i < children.length; i++){
		//If we have an image
		if(children[i].tagName == 'img'){
			//Add the width of the image
			width += position(children[i], context, xpos+width, ypos+100, images);
		}
	}
}
//No children, just add the width of ourself then.
else{
	//If there are no children, set the width to 1 image.
	width += 100;
}

//Add image into the array
k = images.length;
images.push(new Image());

alert('Drawing image[' + k + ']: ' + xml.getAttribute("src") + ' at ' + (xpos - ((80 - width) / 2)) + ', ' + (ypos - -10));

//Draw image
images[k].onload = function() { context.drawImage(images[k], (xpos - ((80 - width) / 2)), (ypos - -10), 80, 80); }
images[k].src = xml.getAttribute("src");

//Return the width of this item
return width;
}

tree.xml

<?xml version="1.0" ?>
<tree>
<img src="./img/1.jpg" border="#FF0000;" label="0">
	<img src="./img/2.jpg" border="#FF0000;" lineout="#FF0000;" label="0/4">
		<img src="./img/3.jpg" border="#00FF00;" lineout="#00FF00;" label="3/2"></img>
	</img>
	<img src="./img/3.jpg" border="#00FF00;" lineout="#FF0000;" label="3/5"></img>
</img>
</tree>

When I run it I get, this:

Firefox:

Alert: Drawing image[0]: ./img/3.jpg at 10, 210
#Nothing happens
Alert: Drawing image[1]: ./img/2.jpg at 10, 110
#Nothing happens
Alert: Drawing image[2]: ./img/1.jpg at 10, 10
#img1 draws at 10, 10

Chrome:

Alert: Drawing image[0]: ./img/3.jpg at 10, 210
#Nothing happens
Alert: Drawing image[1]: ./img/2.jpg at 10, 110
#Nothing happens
Alert: Drawing image[2]: ./img/1.jpg at 10, 10
#img1 draws twice at 10, 10 and at 10,110

If however, I remove the alert, it draws the img1.jpg twice, once where I would expect the img2.jpg to be.

So basically, why is the second img3.jpg ignored, and why are neither of the showing? Even though it has got to the line where they are drawn.

I'm very confused by this, any help would be great.

Sign In

Canvas help.

Recommended Posts

MadnessRed

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information