CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
ItsKasper
ItsKasper

Reputation: 3

Reset button for canvas not working

If the reset button is pressed, I want that the canvas get's white again and it draw's the lines again. I can't figure out why it isn't working. Can somebody help me?

var mouseX; 
var mouseY;
var player1 = true;
var slots = new Array(false, false, false, false, false, false, false, false, false);

function doFirst() { 
  var x = document.getElementById('canvas'); 
  canvas = x.getContext('2d'); canvas.fillRect(250,0,33,816); 
  canvas.fillRect(533,0,33,816); canvas.fillRect(0,250,816,33); 
  canvas.fillRect(0,533,816,33);
  
	canvas.font="bold 150px Tahoma";
  canvas.textAlign="center";
  
  x.addEventListener('mousemove', function(event) {
     mouseX = event.clientX;
     mouseY = event.clientY;
     var status = document.getElementById('status');
    status.innerHTML = mouseX+" | "+mouseY;

    return mouseX + mouseY;
	});
}
/*------------------------------------------------------------*/
	window.addEventListener("click", change, false);
	function change() {
	if(mouseX>=0 && mouseX<=250 && mouseY>=0 && mouseY<=250){
		if(player1==true && slots[0]==false){
      canvas.fillText("X", 125, 170);
      player1=false;
      slots[0]=true;
    }
    else if(player1==false && slots[0]==false){
     	canvas.fillText("O", 125, 170);
      player1=true;
      slots[0]=true;
    }
	}
	
	if(mouseX>=283 && mouseX<=533 && mouseY>=0 && mouseY<=250){
		if(player1==true && slots[1]==false){
      canvas.fillText("X", 408, 170);
      player1=false;
      slots[1]=true;
    }
    else if(player1==false && slots[1]==false){
     	canvas.fillText("O", 408, 170);
      player1=true;
      slots[1]=true;
    }
	}
	
	if(mouseX>=566 && mouseX<=816 && mouseY>=0 && mouseY<=250){
		if(player1==true && slots[2]==false){
      canvas.fillText("X", 691, 170);
      player1=false;
      slots[2]=true;
    }
    else if(player1==false && slots[2]==false){
     	canvas.fillText("O", 691, 170);
      player1=true;
      slots[2]=true;
    }
	}
	
	if(mouseX>=0 && mouseX<=250 && mouseY>=283 && mouseY<=533){
		if(player1==true && slots[3]==false){
      canvas.fillText("X", 125, 453);
      player1=false;
      slots[3]=true;
    }
    else if(player1==false && slots[3]==false){
     	canvas.fillText("O", 125, 453);
      player1=true;
      slots[3]=true;
    }
	}
	
	if(mouseX>=283 && mouseX<=533 && mouseY>=283 && mouseY<=533){
		if(player1==true && slots[4]==false){
      canvas.fillText("X", 408, 453);
      player1=false;
      slots[4]=true;
    }
    else if(player1==false && slots[4]==false){
     	canvas.fillText("O", 408, 453);
      player1=true;
      slots[4]=true;
    }
	}
	
	if(mouseX>=566 && mouseX<=816 && mouseY>=283 && mouseY<=533){
		if(player1==true && slots[5]==false){
      canvas.fillText("X", 691, 453);
      player1=false;
      slots[5]=true;
    }
    else if(player1==false && slots[5]==false){
     	canvas.fillText("O", 691, 453);
      player1=true;
      slots[5]=true;
    }
	}

	if(mouseX>=0 && mouseX<=250 && mouseY>=566 && mouseY<=816){
		if(player1==true && slots[6]==false){
      canvas.fillText("X", 125, 736);
      player1=false;
      slots[6]=true;
    }
    else if(player1==false && slots[6]==false){
     	canvas.fillText("O", 125, 736);
      player1=true;
      slots[6]=true;
    }
	}
	
	
	if(mouseX>=283 && mouseX<=533 && mouseY>=566 && mouseY<=816){
		if(player1==true && slots[7]==false){
      canvas.fillText("X", 408, 736);
      player1=false;
      slots[7]=true;
    }
    else if(player1==false && slots[7]==false){
     	canvas.fillText("O", 408, 736);
      player1=true;
      slots[7]=true;
    }
	}
	
	
	if(mouseX>=566 && mouseX<=816 && mouseY>=566 && mouseY<=816){
		if(player1==true && slots[8]==false){
      canvas.fillText("X", 691, 736);
      player1=false;
      slots[8]=true;
    }
    else if(player1==false && slots[8]==false){
     	canvas.fillText("O", 691, 736);
      player1=true;
      slots[8]=true;
    }
	}

}

doFirst();
<!DOCTYPE html>

<html>
	<head>
	<link type="text/css" rel="stylesheet" href="main.css"/>
	<script src="main.js"></script>
	 <title>Boter, kaas en eieren!</title>
	</head>
	<body>
		
		<canvas id="canvas" height="816" width="816" >
		Als je dit ziet, download google chrome
		</canvas>
		
		<h2 id="status">0 | 0</h2>
		
	</body>
</html>

Upvotes: 0

Views: 74

Answers (1)

marsh
marsh

Reputation: 1441

The simplest way it's clear canvas and redraw grid jsfiddle, but also you must reset slots

function clear() {
  canvas.clearRect(0,0,816,816);
  canvas.fillRect(250,0,33,816); 
  canvas.fillRect(533,0,33,816);
  canvas.fillRect(0,250,816,33); 
  canvas.fillRect(0,533,816,33);

  slots = [false, false, false, false, false, false, false, false, false];
}

Update - Addressing the second problem, replace this line -

window.addEventListener("click", change, false);

with this, using canvas to detect the click:

canvas.addEventListener("click", change, false);

Otherwise the click on the button will also be detected as a click in the window.

Updated fiddle.

Upvotes: 1

Related Questions