Web Analytics Made Easy -
StatCounter Assistance In Adding An Image Background To a Canvas - CodingForum

Announcement

Collapse
No announcement yet.

Assistance In Adding An Image Background To a Canvas

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Assistance In Adding An Image Background To a Canvas

    Greetings,

    I'm trying to add an image background to a Canvas. However when I'm supposedly finished with it, the entire code breaks so I assume one thing broke another. The code was working perfectly until I begun adding codes related to the"imgType" parameter located in my 'component' function.

    This is a local file on my computer and the image file is located in the same folder as the code itself.

    I believe that the error should be laying somewhere in this part of the code:
    Code:
    function component(width, height, color, x, y, txtType, imgType) {
    	this.txtType = txtType;
    	this.imgType = imgType;
    	if (imgType == "image") {
    		this.image = new Image();
    		this.image.src = color;
    	}
        this.width = width;
        this.height = height;
        this.x = x;
        this.y = y;
    	this.update = function() {
    		ctx = myGameArea.context;
    		if (imgType == "image") {
    			ctx.drawImage(this.image, 
    			this.x, 
    			this.y,
    			this.width, this.height);
    		} else {
    		if (this.txtType == "text") {
    			ctx.font = this.width + " " + this.height;
    			ctx.fillStyle = color;
    			ctx.fillText(this.text, this.x, this.y);
    		} else {
    		ctx.fillStyle = color;
    		ctx.fillRect(this.x, this.y, this.width, this.height);
    		}
    	}
    	this.newPos = function() {
    		this.x += this.speedX;
    		this.y += this.speedY;
    	}
    	this.crashWith = function(otherobj) {
    		var myleft = this.x;
    		var myright = this.x + (this.width);
    		var mytop = this.y;
    		var mybottom = this.y + (this.height);
    		var otherleft = otherobj.x;
    		var otherright = otherobj.x + (otherobj.width);
    		var othertop = otherobj.y;
    		var otherbottom = otherobj.y + (otherobj.height);
    		var crash = true;
    		if ((mybottom < othertop) ||
    			(mytop > otherbottom) ||
    			(myright < otherleft) ||
    			(myleft > otherright)) {
    		crash = false;
    		}
    			return crash;
    	}
    	}
    }
    If you'd like to view the entire code, you can find it here: [HTML] <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-wid - Pastebin.com

    The errors I'm getting from the Google Chrome Console (via inspect) are the following:
    Uncaught TypeError: myBackground.newPos is not a function VM67 index.html:136
    Uncaught TypeError: myGamePiece.crashWith is not a function 3VM67 index.html:107
    Uncaught TypeError: Cannot set property '82' of undefined VM67 index.html:40
    Uncaught TypeError: myGamePiece.crashWith is not a function 2VM67 index.html:107
    Uncaught TypeError: Cannot set property '17' of undefined VM67 index.html:40
    Uncaught TypeError: myGamePiece.crashWith is not a function 124VM67 index.html:107
    Uncaught TypeError: myGamePiece.crashWith is not a function 7335VM67 index.html:107
    Before I begun adding codes related to the background (the "imgType" parameter in my 'component' function) I had no errors.

    Your help is truly appreciated!
    Sincerely,
    Jocke

  • #2
    Seems to me that I'v seen this code somewhere before?
    Before I begun adding codes related to the background (the "imgType" parameter in my 'component' function)
    Is the background the only image you are using?

    Comment


    • #3
      There were errors in the structure of component (misplaced "}"). This works:
      Code:
      function component(width, height, color, x, y, txtType, imgType) {
      	this.txtType = txtType;
      	this.imgType = imgType;
      	if (imgType == "image") {
      		this.image = new Image();
      		this.image.src = color;
      	}
          this.width = width;
          this.height = height;
          this.x = x;
          this.y = y;
      	this.update = function() {
      		ctx = myGameArea.context;
      		if (imgType == "image") {
      			ctx.drawImage(this.image, 
      			this.x, 
      			this.y,
      			this.width, this.height);
      		} else {
      		    if (this.txtType == "text") {
      			    ctx.font = this.width + " " + this.height;
      			    ctx.fillStyle = color;
      			    ctx.fillText(this.text, this.x, this.y);
      		    } else {
      		    ctx.fillStyle = color;
      		    ctx.fillRect(this.x, this.y, this.width, this.height);
      		    }
                   }
      	}
      	this.newPos = function() {
      		this.x += this.speedX;
      		this.y += this.speedY;
      	}
      	this.crashWith = function(otherobj) {
      		var myleft = this.x;
      		var myright = this.x + (this.width);
      		var mytop = this.y;
      		var mybottom = this.y + (this.height);
      		var otherleft = otherobj.x;
      		var otherright = otherobj.x + (otherobj.width);
      		var othertop = otherobj.y;
      		var otherbottom = otherobj.y + (otherobj.height);
      		var crash = true;
      		if ((mybottom < othertop) ||
      			(mytop > otherbottom) ||
      			(myright < otherleft) ||
      			(myleft > otherright)) {
      		crash = false;
      		}
      			return crash;
      	}
      }

      Comment


      • #4
        Oh, I see where it went wrong. I literally spent over an hour trying to locate the problem before I made the thread. I truly appreciate your assistance, thank you!

        Have a continued good evening.

        Comment

        Working...
        X