javascript loading before serverside image is deployed

Here is my Javascript

<%-- script to load the default image--%>
<script type="text/javascript"><!--
    window.addEventListener('load', function () {
        // Get the canvas element.
        var elem = document.getElementById('mycanvas');
        if (!elem || !elem.getContext) {
            return;
        }

        // Get the canvas 2d context.
        var context = elem.getContext('2d');
        if (!context || !context.drawImage) {
            return;
        }

        // Create a new image.
        var img = new Image();

        // Once it's loaded draw the image on the canvas.
        img.addEventListener('load', function () {


            // Crop and resize the image: sx, sy, sw, sh, dx, dy, dw, dh.
            context.drawImage(this, 0, 0, 400, 300);
        }, false);
        var imgid = '<%=defaultImage.ClientID %>'
        img.src = document.getElementById(imgid).src;
    }, false);
// --></script> 

If you look at the img.src at the very bottom, it loads the defaultImage.ClientId from the server which is suppose to get the image on the page. If I use a normal url it works, but if I use document.getElementById(imgid).src it just doesnt load an image. I am assuming its be开发者_如何学编程cause the javascript loads before the serverside code is ran. How can I get around this?

---

Put your javascript in Document.Ready()... Also this might be due to the image is in another control..

---

Put the JS at the bottom of your HTML, not the top in this case.