let canvasNode = document.getElementById('canvas'),
        ctxs = canvasNode.getContext("2d");

    console.log(canvasNode)


    class CircleProgress {
        constructor(ctxs, width, height, arc) {
            this.ctx = ctxs
            this.ctx.canvas.width = width
            this.ctx.canvas.height = width
            this.arc = arc
        }

        clearFill() {
            this.ctx.clearRect(0, 0, this.width, this.width);
        }

        fillBg() {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = '#ccc';
            this.ctx.arc(this.width / 2, this.width / 2, 45, 0, 2 * Math.PI);
            this.ctx.stroke();
        }

        fillArc(x) {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = '#ccc';
            this.ctx.arc(this.width / 2, this.width / 2, 45, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
            this.ctx.stroke();
        }

        fillText(x) {
            this.ctx.font = '14px' + ' Arial';
            this.ctx.fillStyle = 'red';
            this.ctx.textBaseline = "middle";
            this.ctx.textAlign = 'center';
            this.ctx.fillText(x.toFixed(1) + '%', this.width / 2, this.width / 2);
        }

        fill(x) {
            this.fillBg();
            this.fillArc(x);
            this.fillText(x);
        }

        testFn() {
            return this.ctx
        }

    }

    let cicle = new CircleProgress(ctxs, 100, 100, 10)

    cicle.fill(100)