eshenk eshenk - 4 months ago 69
Javascript Question

html5 canvas code works in w3schools tryit editor or jsfiddle but not when saved as html file

so basically in the Tryit Editor from the w3schools website my code written here works 100% perfectly fine. although I will mention when its first loaded in the editor the wall sprite does not appear drawn but when i click run a second time it does draw. the same exact thing happens in jsfiddle. the problem is when i copy the code to notepad and save it as an html file it just will not draw the wall anymore. I tried changing the source of the image countless times, it just doesnt make sense why it wouldn't work. I have searched the internet for the same problem as well as stackoverflow, but ive only found problems with jsfiddle where someone has forgotten that it automatically adds tedious aspects and formatting thats required.

<canvas id="canvas"></canvas>
<script>

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.width = 32*16;
canvas.height = 32*10;
canvas.style.border = "1px solid black";

function component(source, x, y, way, amount) {
this.image = new Image();
this.image.src = source;
//horizontal drawing
this.drawhrz = function() {
for(i=0; i<amount; i++) {
context.drawImage(this.image, x, y, 32, 32);
x += 32;
}
}
if(way == "hrz"){
this.drawhrz();
}
//vertical drawing
this.drawvrt = function() {
for(i=0; i<amount; i++) {
context.drawImage(this.image, x, y, 32, 32);
y += 32;
}
}
if(way == "vrt"){
this.drawvrt();
}
};
window.onload = function() {
//initialize world components
var wallsrc = "http://i.imgur.com/QytfQJ1.png";

//draw the components
wall = new component(wallsrc, 0, 32*7, "hrz", 8);
};
</script>

Answer

The resorces are not loaded in time for the canvas to render them. You can accomplish this by something like this(taken from article here):

<!DOCTYPE html>
<html>

<body>
<canvas id="canvas"></canvas>
<style>



</style>
<script type="text/javascript">
        <!--//--><![CDATA[//><!--
            var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload("http://i.imgur.com/QytfQJ1.png")
        //--><!]]>
</script>
<script>

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.width = 32*16;
canvas.height = 32*10;
canvas.style.border = "1px solid black";

function component(source, x, y, way, amount) {
  this.image = new Image();
  this.image.src = source;
  //horizontal drawing
  this.drawhrz = function() {
    for(i=0; i<amount; i++) {
      context.drawImage(this.image, x, y, 32, 32);
      x += 32;
    }
  }
  if(way == "hrz"){
    this.drawhrz();
  }
  //vertical drawing
  this.drawvrt = function() {
    for(i=0; i<amount; i++) {
      context.drawImage(this.image, x, y, 32, 32);
      y += 32;
    }
  }
  if(way == "vrt"){
    this.drawvrt();
  }
};
window.onload = function() {
  //initialize world components
  var wallsrc = "http://i.imgur.com/QytfQJ1.png";

  //draw the components
  wall = new component(wallsrc, 0, 32*7, "hrz", 8);
};
</script>
</body>

</html>