JSFiddle - React, Tailwind, and code Playground

JavaScript

class Ball {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
    }

    draw(deviceContext, fill) {
        deviceContext.beginPath();
        deviceContext.arc(this.x, this.y, this.radius, 0, 6.28, false);
        if (fill)
        {
            deviceContext.fillStyle = this.color;
            deviceContext.fill();
        } else {
            deviceContext.strokeStyle = this.color;
            deviceContext.stroke();
        }
    }

    setDirection(dirX, dirY) {
        this.dirX = dirX;
        this.dirY = dirY;
    }

    move() {
        this.x += this.dirX;
        this.y += this.dirY;
    }

    bounds(minX, minY, maxX, maxY) {
        if (this.x < minX) {
            this.x = minX;
            this.dirX *= -1;
        } else if (this.x > maxX) {
            this.x = maxX;
            this.dirX *= -1;
        }

        if (this.y < minY) {
            this.y = minY;
            this.dirY *= -1;
        } else if (this.y > maxY) {
            this.y = maxY;
            this.dirY *= -1;
        }
    }
}

class BallRainbow extends Ball {
    constructor(x, y, radius, color, count) {
        super(x, y, radius, color);
        this.count = count;
        console.log(this.x, this.y, this.radius, this.color, this.count);
    }

    draw(deviceContext, fill) {
        console.log(this.x, this.y, this.radius, this.color, this.count);
    }
}

const b = new BallRainbow(1, 2, 3, 'r', 4);
b.draw(null, true)