Home Ask Login Register

Developers Planet

Your answer is one click away!

bo_knows February 2016

Canvas click events screwed up when browser window shrinks/moves

I've been playing around with creating a hexagonal grid in HTML5 Canvas. I have a basic grid, where if you click a hex it will highlight the hex (demo here: http://cfiresim.com/hex-map-game-reboot/test.html)

In javascript, I am defining the canvas as such (some parts omitted for brevity):

 var hex = {};
 hex.canvas = document.getElementById("HexCanvas");
 hex.ctx = null;
 console.log("Initializing new game...");
 this.radius = 20;
 this.side = Math.round((3 / 2) * this.radius);
 this.height = Math.round(Math.sqrt(3) * this.radius);
 this.width = Math.round(2 * this.radius);

 //Set Size of main div to size of canvas
 $('#primary-panel').css('height', (hex.height * hex.rows)+hex.height*2);
 hex.canvas.width  = hex.canvas.offsetWidth;
 hex.canvas.height = hex.canvas.offsetHeight;

 //Set click eventlistener for canvas
 this.canvas.addEventListener("mousedown", this.clickEvent.bind(this), false);

 this.ctx = this.canvas.getContext('2d');

All of the code can be found here: https://github.com/boknows/hex-map-game-reboot

My primary question is: Is there a specific way to prevent the click events from getting all screwy when the canvas is resized via the browser? For example, if you shrink the browser to be just bigger than the grid, clicks dont register in the right place. Am I missing some feature of canvas? Maybe getSelectedTile() is not being defined correctly?

Edit: It seems like this primarily happens when the browser scrolls a little, and thus moves the grid off screen. The clicks then register with a weird offset, which I'm guessing is equal to the distance the screen scrolled. Advice?


Qbic February 2016

You must take into a position of a page scroll.

In HexagonGrid.js, instead of this:

hex.clickEvent = function(e) {
        var mouseX = e.pageX;
        var mouseY = e.pageY;

Do this:

hex.clickEvent = function(e) {
        var mouseX = e.pageX - window.pageXOffset;
        var mouseY = e.pageY - window.pageYOffset;

Post Status

Asked in February 2016
Viewed 2,689 times
Voted 12
Answered 1 times


Leave an answer

Quote of the day: live life