CanvasBrick.js

class CanvasBrick extends CanvasItem {
    static width;
    static height;

    /**
     * Brick item
     * @param {Number} x 
     * @param {Number} y 
     * @param {String} color 
     */
    constructor(x = 0, y = 0, color = "#ff0000", power) {
        super(x, y);
        this.color = color;
        this.power = power;
    }

    draw() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.rect(this.x, this.y, CanvasBrick.width, CanvasBrick.height);
        ctx.fill();

        ctx.lineWidth = CanvasBrick.width / 8;

        ctx.fillStyle = "black";
        const halfStroke = ctx.lineWidth / 2;
        ctx.globalAlpha = 0.25;
        ctx.strokeRect(this.x + halfStroke, this.y + halfStroke, CanvasBrick.width - halfStroke * 2, CanvasBrick.height - halfStroke * 2);
        ctx.globalAlpha = 1;
        ctx.lineWidth = 1;
        ctx.strokeRect(this.x, this.y, CanvasBrick.width, CanvasBrick.height);
        ctx.closePath();

        ctx.beginPath();
        let size;
        switch (this.power) {
            case "ball":
                ctx.fillStyle = "white";
                ctx.arc(this.x + CanvasBrick.width / 2, this.y + CanvasBrick.height / 2, CanvasBrick.height / 6, 0, 360)
                break;
            case "multi":
                ctx.fillStyle = "white";
                size = CanvasBrick.height / 8;
                ctx.arc(this.x + CanvasBrick.width / 2 - size * 2, this.y + CanvasBrick.height / 2, size, 0, 360)
                ctx.arc(this.x + CanvasBrick.width / 2, this.y + CanvasBrick.height / 2, size, 0, 360)
                ctx.arc(this.x + CanvasBrick.width / 2 + size * 2, this.y + CanvasBrick.height / 2, size, 0, 360)
                break;
            case "mega":
                size = CanvasBrick.height / 5;
                ctx.fillStyle = "white";
                ctx.arc(this.x + CanvasBrick.width / 2, this.y + CanvasBrick.height / 2, size * 1.5, 0, 360)

                break;
        }
        ctx.fill();
        ctx.closePath();


    }
}