schoening Posted March 8, 2013 Share Posted March 8, 2013 (edited) I am trying to create my own Image( ); Object. This is how the build in Image function works: var img = new Image(); // Create new img element img.src = 'myImage.png'; // Set source path ctx.drawImage(img,0,0) is going to draw the image loaded from the img.src property. But I don't understand why.. Why am I not required to type: ctx.drawImage(img.src,0,0) ?? In fact, that breaks the script. Saying Type Error Please help me out here, I want to create my own "new Image()" with custom properties and methods.. Edited March 8, 2013 by schoening Link to comment Share on other sites More sharing options...
justsomeguy Posted March 8, 2013 Share Posted March 8, 2013 drawImage takes an actual image, not a URL. Importantly, the image has to already be loaded also. It is an error if you try to draw an image that hasn't finished loading yet. So it needs the actual image, not just a URL. https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images Link to comment Share on other sites More sharing options...
schoening Posted March 8, 2013 Author Share Posted March 8, 2013 But, shouldn't this ugly code work? http://cdpn.io/sqtLx Link to comment Share on other sites More sharing options...
justsomeguy Posted March 8, 2013 Share Posted March 8, 2013 That's probably not going to work because the images aren't loaded yet, check the link I posted above for examples. 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