View Full Version : Canvas Image Resizing Problem

03-18-2012, 08: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:

<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) {
for (var src in arrow) {
images[src] = new Image();
images[src].onload = function(){
if (++loaded >= num) {
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);

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.