CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
LlamaButt
LlamaButt

Reputation: 471

Center a canvas element without affecting coordinates for game

I have a game that I'm coding on the HTML5 canvas, and I centered the canvas, but now it's messing with the coordinates in event.clientX and event.clientY for my event listener I have for clicks, I tried changing document.addEventListener to canvas.addEventlistener, but it did nothing. Any suggestions? My code is here-

var canvas = document.getElementById('infRunnerCanvas');
var ctx = canvas.getContext('2d');
var playingGame = false;
function displayMainMenu(){
ctx.font = '35px Comic Sans Ms';
ctx.textAlign = 'center'
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillText('1 button run!',canvas.width/2, 200);
ctx.font = '15px Comic Sans Ms';
ctx.fillText("Any key or click the screen to jump, don't hit the side of a platform.", canvas.width/2, 250)
ctx.fillRect(275,300 , 150, 60)
ctx.fillStyle = 'black';
ctx.font = '25px Comic Sans Ms';
ctx.fillText('PLAY', 350, 340);
}
displayMainMenu();

function handleClicks(){
if(playingGame === false && event.clientX > 275 && event.clientX < 425 && event.clientY > 300 && event.clientY < 360){
alert()  
}
}
canvas.addEventListener('click', handleClicks)
<!DOCTYPE html>
<html>
  <div style = 'text-align: center;'>
 <canvas width = '700' height = '500' id = 'infRunnerCanvas' > sorry, looks like your browser doesn't support the canvas element. </canvas>
 </div>
 <script src = 'script.js'> </script>
</html>

Upvotes: 0

Views: 323

Answers (1)

Justin
Justin

Reputation: 2958

You will want to account for the canvas position by using getBoundingClientRect() on the canvas and subtracting those values form the mouse position.

var canvas = document.getElementById('infRunnerCanvas');
var ctx = canvas.getContext('2d');
canvas.width = 700;
canvas.height = 500;
var playingGame = false;

let mouse = {
  x: null,
  y: null,
};

function handleClicks(){
  if(playingGame === false && mouse.x > 275 && mouse.x < 425 && mouse.y > 300 && mouse.y < 360){
      alert()  
  }
}

window.addEventListener('click', function(e) {
  mouse.x = e.x - canvas.getBoundingClientRect().x;
  mouse.y = e.y - canvas.getBoundingClientRect().y;
  handleClicks();
})

window.addEventListener('resize', function(e) {
  displayMainMenu();
})

function displayMainMenu(){
ctx.fillStyle = 'black'
ctx.font = '35px Comic Sans Ms';
ctx.textAlign = 'center'
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillText('1 button run!',canvas.width/2, 200);
ctx.font = '15px Comic Sans Ms';
ctx.fillText("Any key or click the screen to jump, don't hit the side of a platform.", canvas.width/2, 250)
ctx.fillRect(275, 300, 150, 60)
ctx.fillStyle = 'black';
ctx.font = '25px Comic Sans Ms';
ctx.fillText('PLAY', 350, 340);
}
displayMainMenu();
canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 700px;
  height: 500px;
  transform: translate(-50%, 0)
}
<!DOCTYPE html>
<html>
  <div style = 'text-align: center;'>
 <canvas id = 'infRunnerCanvas' > sorry, looks like your browser doesn't support the canvas element. </canvas>
 </div>
 <script src = 'script.js'> </script>
</html>

run this and you'll see console.log(canvas.getBoundingClientRect())

Upvotes: 1

Related Questions