Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Math help for parallelograms on canvas

1. ## Math help for parallelograms on canvas

First let me say that I'm not very good with math. I have a <canvas> with multiple text "boxes" that are rotated to 300°, which basically makes them parallelograms. They are very similar to this:

http://www.youdraw.com/cgi-bin/solopic.pl?picnum=522860

I'm trying to detect if the mouse is over one of them, but I don't know how to do that. Please help. Thank you!

• Show some code!

• There is a boolean context.isPointinPath(float x,float y);

Since use something like this
Code:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">

</style>
<body>

<script type="text/javascript">
// Point constructor
function Point(x,y){this.x=x;this.y=y};
// To display objects like array with alert or console.log
Object.prototype.toString=function(){return JSON.stringify(this)}

// The test inside triangle
Point.prototype.inside=function(a,b,c){
// Value of Fxy for a Point p (Fxy=0 one équation of the line define by a et b)
// The sign of this function(P) define the two half-plan on either side of the line AB.
// (It is a scalar product AP*An, with An directly perpendicular to AB).
function Fxy(a,b,p){return (p.y-a.y)*(b.x-a.x)-(b.y-a.y)*(p.x-a.x)}
// Same signs for this three values ?
var t=[Fxy(a,b,this),Fxy(b,c,this),Fxy(c,a,this)];
if (t[0]*t[1]<0) return false;
if (t[1]*t[2]<0) return false;
return true;
}
// Use
var A=new Point(1,0),B=new Point(0,2),C=new Point(-3,0);
var P=new Point(-1,1),Q=new Point(0.5,1.1);
alert('A : '+A+' '+'\nB : '+B+'\nC : '+C+'\n'+P+' inside ? '+P.inside(A,B,C)+'\n'+Q+' inside ? '+Q.inside(A,B,C))
</script>
</body>
</html>```
This method is easy to update for convex polygons like parallelograms define by 4 points in order a,b,c,d.
change only function(a,b,c) to function (a,b,c,d), t to t=[Fxy(a,b,this),Fxy(b,c,this),Fxy(c,d,this),F(d,a,this)];
and add a test with if (t[2]*t[3]<0) return false;it's essential to proced by circular permutation

•

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•