HTML and CSS Reference
In-Depth Information
Checking to See Whether a Point Is in the Current
Path
You can easily test whether a certain point is in the current path by using the
isPointInPath()
Canvas function:
context
.
strokeStyle
=
"red"
;
context
.
lineWidth
=
5
;
context
.
moveTo
(
0
,
0
);
context
.
lineTo
(
50
,
0
);
context
.
lineTo
(
50
,
50
);
context
.
stroke
();
var
var
isPoint1InPath1
=
context
.
isPointInPath
(
0
,
0
);
var
var
isPoint1InPath2
=
context
.
isPointInPath
(
10
,
10
);
console
.
log
(
"isPoint1InPath1="
+
isPoint1InPath1
);
console
.
log
(
"isPoint1InPath2="
+
isPoint1InPath2
);
context
.
closePath
();
The first point, (0,0), is in the current path and will output
true
to the console, while the
second point, (10,10), is not and will output
false
to the console.
NOTE
This doesn't work the same in all browsers,
yet
. Compatibility is continuing to improve with each
new browser build. You will need to test across a selection of browsers to see which have added full
compatibility with this function.
