Canvas how to handle my canvas when it start on center screen-CodePudding

The canvas is in the center of the screen and when I add event click and call console.log(e.clientX, e.client.Y) it give e.g. 530, 483 but my shape is 50,50 from canvas.

how do i know i've click on shape not the canvas on the background.

let shapes:any = [];
shapes.push({ x:50, y:50, width: this.qrSize, height: this.qrSize, color:'lightgreen' })

let is_mouse_in_shape = function(x:any, y:any, shape:any){
  let shape_left = shape.x;
  let shape_right = shape.x   shape.width;
  let shape_top = shape.y;
  let shape_bottom = shape.y   shape.height;
  console.log(x,y)        // x = 415, y = 467
  console.log(shape_left, shape_top)         // x = 50, y = 50
  if( x > shape_left && x < shape_right && y > shape_top && y > shape_bottom ){
    return true;
  }
  return false; // It's return false
}
let mouse_down = function(event:any){
  event.preventDefault();
  startX = parseInt(event.clientX);
  startY = parseInt(event.clientY);
  console.log(event)
  let index = 0;
  for(let shape of shapes){
    if(is_mouse_in_shape(startX, startY, shape)){
      console.log('yes');
      current_shape_index = index;
    } else {
      console.log('no')
    }
    index  ;
  }
}
let draw_shapes = function(){
  context.clearRect(0,0, canvas_width, canvas_height);
  for (let shape of shapes){
    context.fillStyle = shape.color;
    context.fillRect(shape.x, shape.y, shape.width, shape.height);
  }
}
draw_shapes();
canvas.onmousedown = mouse_down;

CodePudding user response：

event.clientX and clientY give you the click position relative to the top-left of the window.

To get the click position relative to the top-left of the canvas, you have to subtract the canvas offset from it.

To do so, you can use canvas.getBoundingClientRect. You subtract its left value from clientX, and top from clientY before passing to the is_mouse_in_shape check.

Here's a working example. Note: I had to fix a small typo in the collision detection: y > shape_bottom should be y < shape_bottom.

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
const canvas_width = canvas.width;
const canvas_height = canvas.height;

let shapes = [];
shapes.push({ x:50, y:50, width: 30, height: 30, color:'lightgreen' })

let is_mouse_in_shape = function(x, y, shape){
  let shape_left = shape.x;
  let shape_right = shape.x   shape.width;
  let shape_top = shape.y;
  let shape_bottom = shape.y   shape.height;
  console.log(x,y)        // x = 415, y = 467
  console.log(shape_left, shape_top)         // x = 50, y = 50
  if( x > shape_left && x < shape_right && y > shape_top && y < shape_bottom ){
    return true;
  }
  return false; // It's return false
}
let mouse_down = function(event){
  event.preventDefault();
  const { left, top } = canvas.getBoundingClientRect();
  
  startX = parseInt(event.clientX) - left;
  startY = parseInt(event.clientY) - top;
  
  
  let index = 0;
  for(let shape of shapes){
    if(is_mouse_in_shape(startX, startY, shape)){
      console.log('yes');
      current_shape_index = index;
    } else {
      console.log('no')
    }
    index  ;
  }
}
let draw_shapes = function(){
  context.clearRect(0,0, canvas_width, canvas_height);
  for (let shape of shapes){
    context.fillStyle = shape.color;
    context.fillRect(shape.x, shape.y, shape.width, shape.height);
  }
}

draw_shapes();
canvas.onmousedown = mouse_down;

canvas {
  margin-top: 23px;
  margin-left: 123px;
  border: 2px solid purple;
}

<canvas width="300" height="300"></canvas>