onload vs onLoad (case sensitivity)

Question

I have 2 functions(js) in a webpage for attaching an image to a canvas element:

 function attachImage(tile, x, y)
    {
      base_image = new Image();
      base_image.src = 'Images/tiles/'+(tile-1)+'.png';
      base_image.onload = function(){
        context.drawImage(base_image, 32*x,32*y);
      }
    }

and i literally copy and pasted it and duplicated it for another canvas

  function attachImage2(tile2, x2, y2)
    {
        base_image2 = new Image();
        base_image2.src = 'Images/tiles/'+(tile2-1)+'.png';
        base_image2.onLoad = function(){
            context2.drawImage(base_image2, 32*x2,32*y2);
      }
    }

On firefox, if i make one onload and the other onLoad, then it works fine. but no matter what i do for chrome, it doesn't load the images properly.

edit: here is and image comparison between firefox and chrome:

FIREFOX: https://i.stack.imgur.com/l5sMt.jpg

CHROME: https://i.stack.imgur.com/u12H6.jpg

do not use the **>** block quotes for code. either use ``, or select your code and press the **{}** symbol from the toolbar. — Gabriele Petrioli, Oct 29 '12 at 03:04
@GabyakaG.Petrioli thank you very much! Will do so next time and onwards :) — Wulf, Oct 29 '12 at 03:06
The `onLoad` property does not work for me in Firefox, and I don't know why it would. If you're talking about attributes, that's a different story. — I Hate Lazy, Oct 29 '12 at 03:07
@GabyakaG.Petrioli no, `` is kind-of undesirable. Markdown code syntax is a four-space indent. — Pointy, Oct 29 '12 at 03:10
Maybe declare the `onload` property before the `src` property? — Ian, Oct 29 '12 at 03:12
Also, take a look at: http://stackoverflow.com/questions/5933230/javascript-image-onload — Ian, Oct 29 '12 at 03:13
@pointy, you are right and i know... I just thought it might be easier for a newcomer.. — Gabriele Petrioli, Oct 29 '12 at 03:17

score 5 · Accepted Answer · answered Oct 29 '12 at 03:16

You should use the onload (lowercase).

Some general notes

When you need local variables use var.
You should set the onload before actually setting the src because otherwise (for cached) images the onload might not get called.
Since your methods do the same thing, you should use only one, and pass the context as a parameter

So

<script>
var canvas = document.getElementById('map');
context = canvas.getContext('2d');

var canvas2 = document.getElementById('map2');
context2 = canvas2.getContext('2d');

function attachImage(tile, x, y, canvasContext)
{
  var base_image = new Image();
  base_image.onload = function(){
    canvasContext.drawImage(base_image, 32*x,32*y);
  }
  base_image.src = 'Images/tiles/'+(tile-1)+'.png';
}
</script>

and you should not create a script tag for each call

<?php
echo("<script>");
for($tr = 0; $tr < count($mapArray)-1; $tr++) {
    for($tc = 0; $tc < count($mapArray[$tr])-1; $tc++) {
        $tile = $mapArray[$tr][$tc];
        echo "attachImage(" . $tile . "," . $tc . "," . $tr . ",context);";
    }
}

for($tr = 0; $tr < count($mapArrayy)-1; $tr++) {
    for($tc = 0; $tc < count($mapArrayy[$tr])-1; $tc++) {
        if($mapArrayy[$tr][$tc]!=0){
            echo "attachImage(" . $mapArrayy[$tr][$tc]. "," . $tc . "," . $tr . ",context2);";
        }
    }
}
echo("</script>");
?>

omg thanks a lot! it's fixed! and i would have never thought of putting the script tag out of the loop! — Wulf, Oct 29 '12 at 03:21
@Wulf, also - you should be getting the canvas elements and their contexts in a function that is called as the document's onload callback. Otherwise, you may not get the canvas elements since that part of the page hasn't loaded yet. I always put window.addEventListener('load', myInitFunc, false); as the first line of the script, with the myInitFunc function starting on the second line. You know that when myInitFunc is called, that the DOM is guaranteed to have loaded. Much the same as the onload trick with the images. — enhzflep, Oct 29 '12 at 03:29

onload vs onLoad (case sensitivity)

1 Answers1