HTML5 Canvas Circles

<html>
    <head>
        <title>Canvas</title>
        <style>
            body {
                margin: 0;
            }
            #canvas {
                border: 2px solid grey;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
                //Code by MysteryCoder456 aka Rehatino Gaming on other social medias. Do not copy code.
                function Circle(x, y, radius, speed, color) {
                    this.x = x;
                    this.y = y;
                    this.radius = radius;
                    this.speedx = speed;
                    this.speedy = speed;
                    this.color = color;

                    this.draw = function() {
                        c.beginPath();
                        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                        c.strokeStyle = this.color;
                        c.lineWidth = 5;
                        c.stroke();
                    }

                    this.update = function() {
                        if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
                            this.speedx = this.speedx * -1;
                        }
                        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
                            this.speedy = this.speedy * -1;
                        }

                        this.x += this.speedx;
                        this.y += this.speedy;
                        this.draw();
                    }
                }

                var canvas = document.getElementById('canvas');
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;

                var c = canvas.getContext('2d');

                var circleArray = []

                var colorArray = ['red', 'blue', 'cyan', 'orange', 'pink', 'gold', 'yellow', 'green', 'aqua', 'grey']

                for (var i = 0; i < 200; i++) {
                    var radius = 50,
                    speed = Math.random() * 5,
                    color = colorArray[Math.floor(Math.random() * colorArray.length)],
                    x = Math.random() * (innerWidth - radius * 2) + radius,
                    y = Math.random() * (innerHeight - radius * 2) + radius;

                    circleArray.push(new Circle(x, y, radius, speed, color));
                }

                function animate() {
                    requestAnimationFrame(animate);

                    c.clearRect(0, 0, window.innerWidth, window.innerHeight);

                    for (var i = 0; i < circleArray.length; i++) {
                        circleArray[i].update();
                    }
                }

                animate();
            </script>
    </body>
</html>