Jump to content

Passing value from async function


Mad_Griffith

Recommended Posts

Hi, I don't understand how to pass the value of profileImgX and profileImgY to the spot indicated below:

 

function drawProfileImg() {

    profileImg = new Image();

    profileImg.onload = function() {
        profileImg.x = canvas.width - distanceFromRightSide - ((profileImg.width - 183) / 2);
        profileImg.y = canvas.height - distanceFromBottomSide - ((profileImg.height - 242) / 2);

        profileImgAnimation();
  
    }

}

function profileImgAnimation() {

setInterval(function() {
// I would like to pass the value of profileImgX and profileImgY here

context.drawImage(profileImg, profileImgX, profileImgY, profileImg.width, profileImg.height);

}

}

 

Thank you

Edited by Mad_Griffith
Link to comment
Share on other sites

I have a file input that reads a profile image. When the profile image is loaded the user can perform actions such as dragging and resizing (such functionalities are described in profileImgAnimation(). I need to pass those two variables, profileImgX and profileImgY, from the onload to the profileImgAnimation().

Edited by Mad_Griffith
Link to comment
Share on other sites

For some reason, each

profileImg.x = canvas.width - distanceFromRightSide - ((profileImg.width - 183) / 2);
profileImg.y = canvas.height - distanceFromBottomSide - ((profileImg.height - 242) / 2);

always return 0, even though the individual values return integers... how come?

Link to comment
Share on other sites

I don't see where canvas, distanceFromRightSide and distanceFromBottomSide are set. From the snippet of code you've provided they're as good as undefined.

 

The easiest solution to your scope problem is to make global variables by initializing them outside of any function, but this will likely end up in conflicts.

 

I don't think the <img> element has x and y properties, you should use something other than profileImg.x and profileImg.y to store coordinates.

 

Here's a small update to your code that should solve some of the scope issues:

function drawProfileImg() {
  profileImg = new Image();
  profileImg.onload = function() {
    var x = canvas.width - distanceFromRightSide - ((profileImg.width - 183) / 2);
    var y = canvas.height - distanceFromBottomSide - ((profileImg.height - 242) / 2);

    setInterval(function() {
      context.drawImage(profileImg, x, y, profileImg.width, profileImg.height);
    }, 100);
  };
}
Link to comment
Share on other sites

Thanks a lot Ingolme! I have two questions now:

 

1) Where would a new image object, acting as an overlay to the profile image, be positioned best? I put it there in the profileImg.onload but it always shows behind the profile image...

 

2) How can I pass 2 events to a function and select them individually?

Link to comment
Share on other sites

Things are drawn from back to front on the canvas. If you want an image to be in front you have to draw it after other things are drawn.

 

If you want to have a single function treat two event types differently you can check the type property of the event object:

a.onload = test;
b.onclick = test;

function test(e) {
  if(e.type == "load") {
    // Do something
  } else if(e.type == "click") {
    // Do something else
  }
}
Link to comment
Share on other sites

super handy, thanks.

 

And I just realised that if you want to draw this overlay over a layer that is updated via the RequestAnimationFrame, method you have to put this overlay in the RequestAnimationFrame method and get rid of the onload method that normally is used with the drawImage method

Link to comment
Share on other sites

If you're using requestAnimationFrame then you should draw everything each time the method is called. The algorithm you use in the function called by requestAnimationFrame() should determine the rendering order and then render everything.

 

You should only start the animation after all the images have been loaded.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...