<canvas id="canvas" style="border:1px solid #aaa;display block;margin:50px auto;"></canvas>
<script>
var balls = [];
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
window.onload = function(){
canvas.width = 800;
canvas.height = 800;
for( var i = 0 ; i <= 10 ; i++)
{
var aball = {x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: Math.random() * 50 + 20};
balls[i] = aball;
}
draw();
canvas.addEventListener( "mouseup" , detect );
}
function draw(){
for( var i = 0 ; i <=balls.length ; i++ ){
context.beginPath();
context.arc( balls[i].x , balls[i].y , balls[i].r , 0 , 2*Math.PI);
context.fillStyle = "blueviolet";
context.fill();
}
}
function detect( event ){
var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getboundingClientRect().top;
for( var i = 0 ; i <= balls.length ; i++){
context.BeginPath();
context.arc(balls[i].x,balls[i].y , balls[i].r ,0 , 2*Math.PI);
if( context.isPointInPath(x,y)){
context.fillStyle = "darkgreen";
context.fill();
}`
}
}
</script>
