The basic idea comes from the map of a game. According to the my code review, the map is a full-page canvas. I have no problem with drawing images on canvas. My question is how to detect map houses and update the canvas or even add click ability to it.
I have attached a GIF and HTML code from the original game to better understand my request.
<div id="canvasBorder"><canvas id="canvasMap"></canvas></div>
Okay, This is my code. It’s simple. I have drawn the map houses according to the main image which is large on the canvas.
function onClick2() {
const imagePath = '/lobby/map.png';
//Image Positions and Width/Height
const array = [
{ x: 1764, y: 1104, w: 126, h: 84 },
{ x: 0, y: 1188, w: 126, h: 84 },
{ x: 126, y: 1188, w: 126, h: 84 },
{ x: 2090, y: 340, w: 126, h: 68 },
{ x: 126, y: 1188, w: 126, h: 84 },
];
if (canvasRef?.current) {
let x = canvasRef?.current.getContext('2d');
let img = new Image();
img.src = path;
//Draw Map Blocks
//Here I deleted the extra codes, I just wanted to show that it was done this way.
if (x) {
x.drawImage(
img,
array[3].x,
array[3].y,
array[3].w,
array[3].h,
0,
0,
array[3].w,
array[3].h
);
}
}
}
Here I need your guidance to understand the implementation trick. Here we need to recognize the mouse movement on the image or we need a number of squares that are rotated and have the image and work with the isPointInPath function.
If we proceed with the second way that I mentioned, to draw the squares, we need rotate(-0.25 * Math.PI);