HTML 5 Canvas - 在点击和播放时使球反弹c.fill不起作用？

Question

我试图制作一个在线上移动的球，当它点击它时会弹回它，但我不知道如何让它在点击时反弹。

另外，c.fill（）不起作用，我不知道为什么。 （我已经用它来填补球，也许它不会像那样工作？）

任何建议都会非常有用，因为我是画布的初学者，但我知道这两个问题确实让我感到担忧，因为我无法找到任何解决方案。

＆＃13;

＆＃13;

document.addEventListener('DOMContentLoaded', function () {
    var canvas = document.querySelector('canvas');
    var canvasx = document.getElementById('hr');
    var c = canvas.getContext('2d');

    canvas.width = canvasx.clientWidth;
    canvas.height = canvasx.clientHeight;

    var x = 80;
    var y = 30;
    var dx = 6;
    var dy = 2;
    var radius = 15;
    var gravity = Math.random();
    var friction = 0.9;
    function animate() {
        requestAnimationFrame(animate);

        c.clearRect(0, 0, canvas.width, canvas.height);
        c.beginPath();
        c.arc(x, y, radius, 0, Math.PI * 2, false);
        c.strokeStyle = "#eeede7";
        c.stroke();
        c.beginPath();
        c.moveTo(50, canvas.height);
        c.lineTo(1870, canvas.height);
        c.lineWidth = 3;
        c.fillStyle = "#77dff1";
        c.fill();
        c.strokeStyle = "#77dff1";
        c.stroke();
        update = function () {
            if (y + 20 > canvas.height) {
                dy = -dy * friction;
            }
            else {
                dy += gravity;
            }
            y += dy;
            x += dx;
        }
            function bounce() {
            if ((x + radius + 50) > canvas.width || (x - radius - 50) < 0) {
                dx = -dx;
            }
        }   
        update();
        bounce();
  
    }

    animate();
    function over() {
        var px = event.pageX;
        if (x - px < 0 || x - px > 0) 
        {
            dx = -dx;
        }   
    }

    function bounceBall() 
    {

    }

    canvas.addEventListener('mouseover', over, false);
    canvas.addEventListener('click', bounceBall, false)
}, false);

＆＃13;

#hr {
    position: relative;
    bottom: 5%;
    width: 100%;
    margin: 0 auto;
}

hr {
    border-color: #77dff1;
    max-width: 90%;
}

canvas {
    width: 100%;
}

＆＃13;

<div id="hr">
        <canvas></canvas>
        <script src="js/canvas.js"></script>
    </div>

＆＃13;

＆＃13;

＆＃13;