Question

153

Javascript: rect.contains(point)

rated 0 times [ 159] [ 6] / answers: 1 / hits: 18582 / 8 Years ago, fri, november 18, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jabari

Add To Favorites

Follow

Total Points: 580

Total Questions: 85

Total Answers: 110

Location: Western Sahara

Member since Mon, May 3, 2021

3 Years ago

jabari questions

1 Type is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property

Tue, Mar 22, 22, 00:00, 2 Years ago

1 Get id using useParams hook in functional component - react router dom v6

Mon, Feb 7, 22, 00:00, 2 Years ago

1 How to properly use this jQuery script in my Next.Js app?

Fri, Jul 30, 21, 00:00, 3 Years ago

1 Webpack: Unknown property query?

Tue, May 4, 21, 00:00, 3 Years ago

1 JS Decrypt Laravel Encrypted String

Fri, Jul 24, 20, 00:00, 4 Years ago

View All

answered 8 Years ago bobbyallanh · Accepted Answer

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

}