I don't get it, if I declare things manually it works fine, if I use a constructor to make the same object with same set of properties I can console.log that the correct properties and values are tied to that object. But when i go to use the new object with it's properties the same way as the manually declared ones, it throws the error in the title.
The working "manual" version: (This part works fine)
That works fine, it draws two rats from the same image, ratImage, which is declared elsewhere and referenced by that variable. I move the rat by using it's x, y properties, so (rat1.x, rat1.y) or shuffle it's frame in a sprite sheet with rat1.srcX+=single_frame_distance
//Then in my render() function
ctx.drawImage(rat1.image, rat1.srcX,rat1.srcY, 50,50, bgimage.x+ rat1.x, bgimage.y+rat1.y,50,50);
ctx.drawImage(rat2.image, rat2.srcX,rat2.srcY, 50,50, bgimage.x+ rat2.x, bgimage.y+rat2.y,50,50);
So I tried to make my first constructor, which seems really awesome.
It makes new rat objects, it gives them all the properties, I can console.log the properties on the newly created objects to verify it has the right property and value.
console.log('RAT INSTANTIATED: ' + this.image); //outputs ratImage
console.log('RAT:active: ' + this.active); //outputs false
var rat3= new Rat('ratImage', 0,0, 50,50, 90,50, 50,50, 'false');
var rat4= new Rat('ratImage', 0,0, 50,50, 50,90, 50,50, 'false');
console.log('rat3: '+rat3.image); //outputs ratImage
console.log('rat3: '+rat3.active); //outputs false
But the second I copy the drawImage section that worked for rat1 and rat2, and substitute the newly created rat3 and rat4 objects for rat1 and rat2, it throws the error in the title.
This part doesn't work
If I remove the '' quote marks around the image and "active" property it throws undefined and breaks even more, other than that I can't figure out what "type" it's expecting.......
ctx.drawImage(rat3.image, rat3.srcX, rat3.srcY, rat3.sizeX,rat3.sizeY, bgimage.x+ rat3.x, bgimage.y+rat3.y,rat3.destW,rat3.destH);
//or with constant height/widths, tested both ways
ctx.drawImage(rat4.image, rat4.srcX, rat4.srcY, 50,50, bgimage.x+ rat4.x, bgimage.y+rat4.y,50,50);
Is it because of the ratImage? It's a variable, the path to the image is ratImage.src=".../path/rat.gif"
That's the only difference I can tell between the "manual" version compared to the "constructed" one.
EDIT:: Looks like it is the image part of it. If I get rid of rat3.image and rat4.image and just place the variable of the image like:
ctx.drawImage(ratImage, rat3.srcX, rat3.srcY, rat3.sizeX,rat3.sizeY, bgimage.x+ rat3.x, bgimage.y+rat3.y,rat3.destW,rat3.destH);
ctx.drawImage(ratImage, rat4.srcX, rat4.srcY, rat4.sizeX,rat4.sizeY, bgimage.x+ rat4.x, bgimage.y+rat4.y,rat4.destW,rat4.destH);
It works...I guess I can work with that, but out of curiosity is there a way to tie an image variable to the object as a property like I was trying to do in the constructor?