Detecting a point in a path
This is another example of a mouse event, but another new concept is introduced here: how to find whether a point lies in a given path. The output of the recipe is as follows:
How to do it
The recipe is as follows:
The HTML code:
<html>
<head>
<title>Point In Path Example</title>
<script src="pointinpath.js"></script>
</head>
<body onload=init()>
<canvas width="400" height="400" id="MyCanvasArea" style="border:2px solid blue;">
Canvas tag is not supported by your browser
</canvas>
<br>
<h1>click inside the rectangle to spot</h1>
<br>
<form>
<input type="button" onclick="init();" value="Reset" >
</form>
</body>
</html>The JavaScript code:
var ctx;
var can;
function init(){
can=document.getElementById("MyCanvasArea");
ctx=can.getContext("2d");
can.addEventListener("mousedown",doMouseDown,false);
clear();
drawRectangle(...
