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)