canvas之事件交互效果isPointPath

var balls = [];
        var canvas = document.getElementById('canvas');
        canvas.Onclick= function(e){ 
　　　　　　　//获取基于画布的位置
            var x = e.clientX - canvas.getBoundingClientRect().left;    //getBoundingClientRect是获取元素相对于文档的位置
            var y = e.clientY - canvas.getBoundingClientRect().top;    //getBoundingClientRect是获取元素相对于文档的位置
            for(var i = 0 ; i < balls.length; i++ ){
                context.beginPath();
                context.arc(balls[i].x, balls[i].y, balls[i].radius, Math.PI * 0, Math.PI * 2, 0);
                if(context.isPointInPath(x, y)){
                    context.fillStyle='#058';
                    context.fill();
                }                
            }
            context.isPointInPath(x, y);
        }
        if (canvas.getContext) {
            canvas.width = 1200;
            canvas.height = 800;
            var cOntext= canvas.getContext('2d');

            for (var i = 0; i <20; i++) {
                var radius = Math.random() * 50 + 20;
                var R = Math.floor(Math.random() * 255);
                var G = Math.floor(Math.random() * 255);
                var B = Math.floor(Math.random() * 255);
                var obj = {
                    radius: radius,
                    x: Math.random() * (canvas.width - 2 * radius) + radius,
                    y: Math.random() * (canvas.height - 2 * radius) + radius,
                    color: 'rgb(' + R + "," + G + "," + B + ')'
                }
                balls[i] = obj; 
            }
            draw(context);

        }
        function draw(context) {
            // context.clearRect(0, 0, canvas.width, canvas.height);
            
            for (var i = 0; i