CODEWITHSUNDEEP
javascriptimagecanvas
Iblob
Iblob

Reputation: 150

Is there a way to make a function return true or false if an image is loaded?

I'm working on a small game using the canvas element to draw images onto it and have them act as solid tiles.

In order for the context.drawImage() function to work, the image variable called when drawing is called needs to be loaded into memory first otherwise it will try to draw an undefined image.

Currently i have it set up using the image.onload event like this:

var imageloaded = false;
var image = new Image();
var c = document.getElementById("game");
var ctx = c.getContext("2d");
image.src = "images/image.png";

function drawimage () {
    "use strict";
    if (imageloaded === true) {
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.drawimage(image, x, y, width, height);
    }
}

image.onload = function () {
    "use strict";
    imageloaded = true;
    drawimage();
};

-Edit- here's a new snippet since i'm doing this for a game where the platforms drawn will move.

var drawtimer = setInterval(drawimage, 10);

This works but it's a little messy, i need a new global variable for every image i need to load and a onload function to set that variable.

What i'm wondering is, instead of doing:

if (imageloaded === true) {
    ctx.drawimage(image, x, y, width, height);
}

I could do something that works like:

if (image.testloaded() === true) {
    ctx.drawimage(image, x, y, width, height);
}

And have that report back if the image is loaded without that having to rely on onload.

For reference i'm working with pure javascript here, i would be willing to use special libraries but an ideal answer would be using pure javascript.

Thanks!

Upvotes: 1

Views: 965

Answers (3)

Iblob
Iblob

Reputation: 150

Thanks for the help everybody! I considered Joseph Young's comment about using a central function or variable to tell what images are loaded and came up with this:

var imagesloaded = 0;

image.onload = function () {
    imagesloaded += 1;
}

function imagetestloaded () {
    if(imagesloaded === 1){
        return(true);
    } else {
        return(false);
    }
}

if (imagetestloaded() === true) {
    ctx.drawimage(image, x, y, width, height);
}

And this will run if all the images the code expects to see are there.

Upvotes: 0

guest271314
guest271314

Reputation: 1

The issue is here: ctx.drawimage(image, x, y, width, height); where i at drawimage should be uppercase I: ctx.drawImage, see CanvasRenderingContext2D.drawImage()

Also, try moving image.src = "/path/to/image/"; after image.onload = function() {} event declaration

var imageloaded = false;
var image = new Image();
var c = document.getElementById("game");
var ctx = c.getContext("2d");

function drawimage () {
    "use strict";
  console.log(imageloaded)
    if (imageloaded === true) {
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.drawImage(image, 0, 0, c.width, c.height);
    }
}

image.onload = function () {
    "use strict";
    imageloaded = true;
    drawimage();
};

image.src = "http://lorempixel.com/50/50/nature";
<canvas id="game" width="50px" height="50px"></canvas>

Upvotes: 1

Joseph Young
Joseph Young

Reputation: 2795

If the drawImage() function is only called on load, is it not always loaded and therefore not required to be checked? I.E

function drawimage () {
    "use strict";
    if (imageloaded === true) {
        ctx.drawimage(image, x, y, width, height);
    }
}

image.onload = function () {
    "use strict";
    imageloaded = true;
    drawimage();
};

is the same as

function drawimage () {
    "use strict";
    ctx.drawimage(image, x, y, width, height);
}

image.onload = function () {
    "use strict";
    drawimage();
};

Upvotes: 0

Related Questions