determing cell x and y of a canvas grid

254
April 04, 2017, at 4:09 PM

I have a nodejs application that creates a grid within a canvas currently using for loops. I need help writing an algorithm to determine which cell i my cursor is currently in x and y wise. The grid is currently 25x25 and I am tracking mouse movements within the canvas. Instead of giving me a raw x and y mouse coordinate I would like a cell coordinates. any help? thanks!

//START {EXPRESS} 
var express = require('express'); 
var app = express(); 
var serv = require('http').Server(app); 
  
app.get('/',function(req, res) { 
    res.sendFile(__dirname + '/client/index.html'); 
}); 
app.use('/client',express.static(__dirname + '/client')); 
  
serv.listen(2000); 
console.log("Server started."); 
 
 
var io = require('socket.io')(serv,{}); 
io.sockets.on('connection', function(socket){ 
	//RETRIEVING THE MOUSE X AND Y COORDINATES 
	socket.on('mouseMove', function(data){ 
		console.log(data.x + ", " + data.y); 
	}); 
 
});
<div id="gameDiv"> 
	<center> 
	<canvas id="ctx" width="750" height="750" style="border:1px solid #000000;"></canvas> 
	</center> 
</div> 
	 
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> 
	 
<script> 
	//NETWORK VARIABLES 
	var socket = io(); 
	//GETTING THE CANVAS BY ID 
	var canvas = document.getElementById("ctx"); 
	context = canvas.getContext("2d"); 
	 
	//GRID VARIABLES 
	var w=30, 
	h=30, 
	row=25, 
	col=25, 
	x=0, 
	y=0; 
	 
	//LOOP TO DRAW THE GRID 
	for(x=0; x<row; x++){ 
		for(y=0; y<col; y++){ 
			context.strokeRect(w*x,h*y,w,h); 
		} 
	} 
	 
	//GETTING THE MOUSE X AND Y 
	function getMousePos(canvas, event){ 
		var rect = canvas.getBoundingClientRect(); 
		return { 
			x:event.clientX - rect.left, 
			y:event.clientY - rect.top 
		}; 
	} 
	 
	canvas.addEventListener('mousemove', function(event){ 
		var pos = getMousePos(canvas, event); 
		var posx = pos.x; 
		var posy = pos.y; 
		 
        socket.emit('mouseMove',{x:x, y:y}); 
	}, false); 
	 
	 
	 
</script> 
 
</html>

Answer 1

AH I ended up figuring it out myself.

the algorithm is posx / height rounded up posy / width rounded up

here is the html

<div id="gameDiv"> 
	<center> 
	<canvas id="ctx" width="750" height="750" style="border:1px solid #000000;"></canvas> 
	</center> 
</div> 
	 
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> 
	 
<script> 
	//NETWORK VARIABLES 
	var socket = io(); 
	//GETTING THE CANVAS BY ID 
	var canvas = document.getElementById("ctx"); 
	context = canvas.getContext("2d"); 
	 
	//GRID VARIABLES 
	var w=30, 
	h=30, 
	row=25, 
	col=25, 
	x=0, 
	y=0, 
	cX=0, 
	cY=0; 
	 
	//LOOP TO DRAW THE GRID 
	for(x=0; x<row; x++){ 
		for(y=0; y<col; y++){ 
			context.strokeRect(w*x,h*y,w,h); 
		} 
	} 
	 
	//GETTING THE MOUSE X AND Y 
	function getMousePos(canvas, event){ 
		var rect = canvas.getBoundingClientRect(); 
		return { 
			x:event.clientX - rect.left, 
			y:event.clientY - rect.top 
		}; 
	} 
	 
	canvas.addEventListener('mousemove', function(event){ 
		 
		var pos = getMousePos(canvas, event); 
		var posx = pos.x; 
		var posy = pos.y; 
		 
		**cX = Math.ceil(posx/30); 
		cY = Math.ceil(posy/30);** 
		 
        socket.emit('mouseMove',{x:cX, y:cY}); 
	}, false); 
	

READ ALSO
how to make a valid search functionality

how to make a valid search functionality

I'm making a search functionalityBelow is My Code and User stories

219
NodeJS Server-Server Secure Communication

NodeJS Server-Server Secure Communication

I have two servers using NodeJS on the same domain(server1

298
Accessing Json Object : Node-Red

Accessing Json Object : Node-Red

I am using Node-Red to count the number of peopleFor this purpose, I have designed a flow which is successfully detecting faces using visual recognition node

381
Object variable is undefined even though it&#39;s initialised

Object variable is undefined even though it's initialised

I have a Node project where I create a Unit and an AddGate:

266