It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 21 June 2013
One of the most important tools connecting users and the computers is mouse click. HTML5 Canvas, like other programming languages, has capability to detect whether a mouse click is in specified object (path) or not. But before that we must transform the mouse position based on the canvas element coordinates. Then a hit detector for each object can be created separately; and the object graphical style can change when it is selected. In the following example, click on one of the objects to see how HTML5 Canvas Mouse click detector works. If you click outside of all objects, all shapes styles returns to its default gray.
<!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<br>
<canvas id="myCanvas" width="400" height="230" onclick="DefinePaths(event)"></canvas>
<script>
var cnv = document.getElementById('myCanvas')
var ctx = cnv.getContext('2d')
var deg = Math.PI/180
DefinePaths(null)
function DefinePaths(event){
ctx.beginPath()
ctx.moveTo(10, 70)
ctx.bezierCurveTo (60, 70, 60, 0, 110, 70)
if (event!=null){
if (IsInPath(event)) SelStyle()
else DifStyle()
}else DifStyle()
ctx.closePath()
ctx.fill()
ctx.stroke()
ctx.beginPath()
ctx.moveTo(200, 20)
ctx.lineTo(250, 20)
ctx.quadraticCurveTo(280, 20, 280, 40)
ctx.lineTo(280, 80)
ctx.quadraticCurveTo(260, 80, 250, 100)
ctx.lineTo(200, 100)
ctx.quadraticCurveTo(190, 80, 170, 80)
ctx.lineTo(170, 40)
ctx.quadraticCurveTo(170, 20, 200, 20)
if (event!=null){
if (IsInPath(event)) SelStyle()
else DifStyle()
}else DifStyle()
ctx.closePath()
ctx.fill()
ctx.stroke()
ctx.beginPath()
ctx.moveTo(10, 130)
ctx.lineTo(10, 200)
ctx.lineTo(100, 200)
if (event!=null){
if (IsInPath(event)) SelStyle()
else DifStyle()
}else DifStyle()
ctx.closePath()
ctx.fill()
ctx.stroke()
ctx.beginPath()
ctx.moveTo(220, 130)
ctx.lineTo(170, 180)
ctx.lineTo(220, 230)
ctx.lineTo(270, 180)
if (event!=null){
if (IsInPath(event)) SelStyle()
else DifStyle()
}else DifStyle()
ctx.closePath()
ctx.fill()
ctx.stroke()
}
function IsInPath(event) {
var bb, x, y
bb = cnv.getBoundingClientRect()
x = (event.clientX-bb.left) * (cnv.width/bb.width)
y = (event.clientY-bb.top) * (cnv.height/bb.height)
return ctx.isPointInPath(x,y)
}
function SelStyle(){
ctx.lineWidth= 2
ctx.strokeStyle= "brown"
ctx.fillStyle= "cyan"
}
function DifStyle(){
ctx.lineWidth= 2
ctx.fillStyle= "gray"
ctx.strokeStyle= "darkblue"
}
</script>
<div style="text-align: left"><font face="Tahoma"><br><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!