window.onload = function() {
    var canvas = document.getElementById("canvas");
    var c = canvas.getContext('2d');

    canvas.width = 1200;
    canvas.height = 800;

    var ball = [];

    for (var i = 0; i < 10; i++) {
        var aBall = {
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            r: Math.random() * 30 + 10
        }
        ball[i] = aBall;
    }

    draw(c);

    canvas.addEventListener('click', detect);

    function draw(c) {

        for (var i = 0; i < ball.length; i++) {
            c.beginPath();
            c.arc(ball[i].x, ball[i].y, ball[i].r, 0, 2 * Math.PI);
            c.fillStyle = "#058";
            c.fill();
        }
    }
    
    function detect(event){
        var x=event.clientX-canvas.getBoundingClientRect().left;
        var y=event.clientY-canvas.getBoundingClientRect().top;
        
        for(var i=0;i<ball.length;i++){
            c.beginPath();
            c.arc(ball[i].x, ball[i].y, ball[i].r, 0, 2 * Math.PI);
            c.closePath();
        }
        if(c.isPointInPath(x,y)){
            c.fillStyle='red';
            c.fill();
        }
        
    }
}