I like to see if mouseclick is in a rectangle area (in canvas). In C# i would do this.

var point = new Point(x, y);
var rectangles = new List<Rect>();
//rectangles.add(new Rect(x,y,h,w));
foreach(var rectangle in rectangles)
{
    if(rectangle.Contains(point))
    {
        //do something
    }
}

In Javascript I Tried this

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
   {
     //do something
   };

But there are more rectangles in the context then in my list rectangles. Can somebody help me out?

I like to see if mouseclick is in a rectangle area (in canvas). In C# i would do this.

var point = new Point(x, y);
var rectangles = new List<Rect>();
//rectangles.add(new Rect(x,y,h,w));
foreach(var rectangle in rectangles)
{
    if(rectangle.Contains(point))
    {
        //do something
    }
}

In Javascript I Tried this

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
   {
     //do something
   };

But there are more rectangles in the context then in my list rectangles. Can somebody help me out?

• javascript
• point
• rect

• define an object that stores the rectangles parameters as well as draws itself and tests for contained points – thedarklord47 Commented Nov 19, 2016 at 0:22

3 Answers 3

if you are going to do anything even slightly complicated with these rects I would define a rectangle object to store, draw, and test for containing points. something like this:

function MyRect (x, y, w, h) {

    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;

    this.contains = function (x, y) {
        return this.x <= x && x <= this.x + this.width &&
               this.y <= y && y <= this.y + this.height;
    }

    this.draw = function (ctx) {
        ctx.rect(this.x, this.y, this.width, this.height)
    }
}

then use it like this:

var r = new MyRect(x, y, w, h);
r.draw(ctx);

if (r.contains(x, y)) {
    // do something
}

You could calculate it yourself!

Save the bounds of the rectangles, draw them, and then look if the mouse is over them

let rects = [{x: 20, y: 20, w: 150, h: 100}]
let mouse = ...
for (let rect of rects) {
  ctx.fillRect(rect.x, rect.y, rect.w, rect.h)
  if(mouse.x >= rect.x && mouse.x <= rect.x + rect.w && mouse.y >= rect.y && mouse.y <= rect.y + rect.h){
    //do something
  }
}

You should've stored your rectangle points, if you wish to work on it after you've used it for drawing. Since in canvas, you're only able to draw on it and not retrieving any drawn points from it.

Old good way would be like,

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var rectangles = [
  [20, 20, 50, 50],
  [70, 70, 80, 80],
  [150, 150, 110, 110]
];

for (var i = 0; i < rectangles.length; i++) {
  ctx.fillRect(...rectangles[i]);
}

var isPointInRects = function(x, y) {
  for (var i = 0; i < rectangles.length; i++) {
    var xStart = rectangles[i][0],
      yStart = rectangles[i][1],
      xEnd = xStart + rectangles[i][2],
      yEnd = yStart + rectangles[i][3];

    if ((x >= xStart && x <= xEnd) &&
      (y >= yStart && y <= yEnd)) {
      return true;
    }
  }
  return false;
};

console.log(isPointInRects(20, 20));

<canvas id="myCanvas" width=500 height=500></canvas>