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.