CODEWITHSUNDEEP
javascripthtmlobjectcanvas
Maxim Webb
Maxim Webb

Reputation: 77

Issue with redrawing objects in HTML canvas

I am using HTML canvas to draw, then move a red square across the screen. However, when I change the x value of the square and redraw it, an error is thrown stating that "mg_player1 is not defined..." I can't seem to figure out the issue in the code, can anyone help?

<html>
<head>
<style>
#mg_canvas {
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
	width: 1600px;
	height: 800px;
	border: 4px solid black;
}
</style>
<body onload="mg_start()">
<div class="hideMultiGames">
<button class="button" onclick="mg_player1.moveUp()">Click me!</button>
<script>
	function mg_start() {
		multiGames_area.drawCanvas();
		var mg_player1 = new mg_player("red", 0, 670);
	}
	var multiGames_area = {
		canvas : document.createElement("canvas"),
		drawCanvas : function() {
			if (document.getElementById("mg_canvas")) {
			}
			else {
				this.canvas.width = 1600;
				this.canvas.height = 800;
				this.canvas.id = "mg_canvas"
				this.canvas.className = "hideMultiGames";
				multiGames_area.context = this.canvas.getContext("2d");
				document.body.insertBefore(this.canvas, document.body.childNodes[0]);
				
			}
		},
		mg_drawGround : function() {
			var mg_ground;
			mg_ground = document.getElementById("mg_canvas");
			var ground = mg_ground.getContext("2d");
			ground.moveTo(0,700);
			ground.lineTo(1600,700);
			ground.stroke();
		},
		mg_clear : function() {
			this.context.clearRect(0, 0, 1600, 800);
		},
	}
	function mg_player(color, x, y) { //stores general shared methods and properties of players
		this.width = 30;
		this.height = 30;
		this.color = color;
		this.x = x;
		this.y = y;
		ctx = multiGames_area.context;
		ctx.fillStyle = this.color;
		ctx.fillRect(this.x, this.y, this.width, this.height);
		this.moveUp = function() { //function that is throwing errors
			this.x = 1000;
			ctx.fillStyle = this.color;
			ctx.fillRect(this.x, this.y, this.width, this.height);
		};
	}
	
</script>

</div>
</body>
</html>

`

Upvotes: 0

Views: 89

Answers (1)

NtFreX
NtFreX

Reputation: 11357

You need to define the mg_player1 object globaly. If you use the var keyword the object is created only in the current function context.

mg_player1 = new mg_player("red", 0, 670);

And you need to call mg_clear in the moveUp function to redraw to canvas. Also better read the width and height property from the canvas in your mg_clear function.

So the script should be like this.

<html>
<head>
<style>
#mg_canvas {
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
	width: 1600px;
	height: 800px;
	border: 4px solid black;
}
</style>
<body onload="mg_start()">
<div class="hideMultiGames">
<button class="button" onclick="mg_player1.moveUp()">Click me!</button>
<script>
	function mg_start() {
		multiGames_area.drawCanvas();
		//define the `mg_player1` object global (in the `window` context)
		mg_player1 = new mg_player("red", 0, 670);
	}
	var multiGames_area = {
		canvas : document.createElement("canvas"),
		drawCanvas : function() {
			if (document.getElementById("mg_canvas")) {
			}
			else {
				this.canvas.width = 1600;
				this.canvas.height = 800;
				this.canvas.id = "mg_canvas"
				this.canvas.className = "hideMultiGames";
				multiGames_area.context = this.canvas.getContext("2d");
				document.body.insertBefore(this.canvas, document.body.childNodes[0]);
				
			}
		},
		mg_drawGround : function() {
			var mg_ground;
			mg_ground = document.getElementById("mg_canvas");
			var ground = mg_ground.getContext("2d");
			ground.moveTo(0,700);
			ground.lineTo(1600,700);
			ground.stroke();
		},
		mg_clear : function() {
			//read the width and heigth from the canvas
			this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
		},
	}
	function mg_player(color, x, y) { //stores general shared methods and properties of players
        this.width = 30;
		this.height = 30;
		this.color = color;
		this.x = x;
		this.y = y;
		ctx = multiGames_area.context;
		ctx.fillStyle = this.color;
		ctx.fillRect(this.x, this.y, this.width, this.height);
		this.moveUp = function() {
			//clear the canvas
			multiGames_area.mg_clear();

			this.x = 1000;
			ctx.fillStyle = this.color;
			ctx.fillRect(this.x, this.y, this.width, this.height);
		};
	}
	
</script>

</div>
</body>
</html>

Upvotes: 1

Related Questions