Canvas Image Resizing Problem

Myrmidon16 · 03-18-2012, 07:16 PM

Hello all;

I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code:

Code:

<body> 
    <canvas id="worldscreen" class="map"></canvas><br  />

<script type="text/javascript">  
    function loadImages(arrow, call) {
    var images = {};
    var loaded = 0;
    var num = 0;
    for (var src in arrow) {
        num++;
    }
    for (var src in arrow) {
        images[src] = new Image();
        images[src].onload = function(){
            if (++loaded >= num) {
                call(images);
            }
        };
        images[src].src = arrow[src];
    }
}
 
window.onload = function(images) {
    var canvas = document.getElementById("worldscreen").getContext("2d");
 
    var arrow = {
        top: "sideQUEST/images/arrow-top.png",
		right: "sideQUEST/images/arrow-right.png",
		bottom: "sideQUEST/images/arrow-bottom.png",
        left: "sideQUEST/images/arrow-left.png",
    };
 
    loadImages(arrow, function(images) {
        canvas.drawImage(images.top, 100, 18);
		canvas.drawImage(images.right, 215, 36);
		canvas.drawImage(images.bottom, 100, 115);
        canvas.drawImage(images.left, 36, 36);
    });
};
</script>
</body>

You can see the code in action here: http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you.