Hi,

I am using canvas to draw a hex grid for future projects and games later on.

I have a js file with a class that draws a hex shape.

class cell{

	constructor(row , column , x , y , size , iswall , type , displayindex){

		this.row = row;
		this.column = column;
		this.x = x;
		this.y = y;
		this.size = size;
		this.iswall = iswall
		this.type = type;
		this.displayindex = displayindex
	}

	draw(){

		context.save()
		context.translate(this.x , this.y)
		context.beginPath()
		context.strokeStyle = "dodgerblue"
		
		if(this.iswall){
			context.fillStyle = "lightsteelblue"
		}else{
			context.fillStyle = "snow"
		}

		if(this.type === "end"){
			context.fillStyle = "red"
		}

		if(this.type === "start"){
			context.fillStyle = "lime"
		}

		context.moveTo(0 , -this.size/2)
		context.rotate(2 * Math.PI/6)
		context.lineTo(0 , -this.size/2)
		context.rotate(2 * Math.PI/6)
		context.lineTo(0 , -this.size/2)
		context.rotate(2 * Math.PI/6)
		context.lineTo(0 , -this.size/2)
		context.rotate(2 * Math.PI/6)
		context.lineTo(0 , -this.size/2)
		context.rotate(2 * Math.PI/6)
		context.lineTo(0 , -this.size/2)
		context.rotate(2 * Math.PI/6)
		context.lineTo(0 , -this.size/2)
		context.fill()
		context.stroke()
		context.closePath()

	
		context.restore()
	
	}

}

All shapes in the hex grid are stored in 1 array.

I want to create a EventListener for the mouse that finds the hex shape in my array specified by its row and column...now I do a calculation to find row and column when I click in the grid but this works a little buggy because I am dealing with hexagonal shapes and not rectangles.

an eventlistener in the class that returns the shape object should be a more reliable solution...

this.addEventListener("click" , function(event){

return this

}

I have trouble implementing this. Anybody more experience with this?

I can share this project with a repository on github if needed.

I appreciate any tips of help

thx

Bart