MadnessRed
-
Posts
262 -
Joined
-
Last visited
Never
MadnessRed's Achievements
Regular Member (3/5)
0
Reputation
-
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.