Mad_Griffith Posted May 29, 2016 Share Posted May 29, 2016 (edited) 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 May 30, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
davej Posted May 29, 2016 Share Posted May 29, 2016 I don't understand this at all. Are you working from an example somewhere? See... https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations Link to comment Share on other sites More sharing options...
Mad_Griffith Posted May 29, 2016 Author Share Posted May 29, 2016 Hi, yes. I cleaned up the code above, it should be clearer now. Link to comment Share on other sites More sharing options...
davej Posted May 29, 2016 Share Posted May 29, 2016 What are you trying to do? Link to comment Share on other sites More sharing options...
Mad_Griffith Posted May 29, 2016 Author Share Posted May 29, 2016 (edited) 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 May 29, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
davej Posted May 29, 2016 Share Posted May 29, 2016 I still don't understand. Where is the rest of the code? What code are you are basing this on? Link to comment Share on other sites More sharing options...
Mad_Griffith Posted May 29, 2016 Author Share Posted May 29, 2016 (edited) On an app I am coding here: http://bit.ly/1Z7fajP Edited May 29, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
Mad_Griffith Posted May 30, 2016 Author Share Posted May 30, 2016 Still stuck with this... don't know how to get those 2 variables out of the onLoad scope... Link to comment Share on other sites More sharing options...
Mad_Griffith Posted May 30, 2016 Author Share Posted May 30, 2016 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 More sharing options...
Ingolme Posted May 30, 2016 Share Posted May 30, 2016 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 More sharing options...
Mad_Griffith Posted May 30, 2016 Author Share Posted May 30, 2016 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 More sharing options...
Ingolme Posted May 30, 2016 Share Posted May 30, 2016 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 More sharing options...
Mad_Griffith Posted May 30, 2016 Author Share Posted May 30, 2016 super handy, thanks. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted May 30, 2016 Author Share Posted May 30, 2016 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 More sharing options...
Ingolme Posted May 30, 2016 Share Posted May 30, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now