照着一模一样打的，找不出错那里/(ㄒoㄒ)/~~

        <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>