Javascript 追加子项时出现HierarchyRequestError（this.context1.canvas1）

我正在尝试为我正在制作的游戏创建一个进度条。但是，当我尝试将画布连接到div时，出现了这个HierarchyRequestError。任何帮助都将不胜感激

this.setSizePercent(horizontalSizePercent, verticalSizePercent);
this.createCanvas();
this.createDOMElement();

return this;

})

//原型

COREHTML5.RoundedRectangle.prototype={

createCanvas: function () {
    var canvas1 = document.createElement('canvas');
    this.context1 = canvas1.getContext('2d');
    return canvas1;
},
createDOMElement: function () {
    this.domElement = document.createElement('div');
    this.domElement.appendChild(this.context1.canvas1);
},
appendTo: function (element) {
    element.appendChild(this.domElement);
    this.domElement.style.width = element.offsetWidth + 'px';
    this.domElement.style.height = element.offsetHeight + 'px';
    this.resize(element.offsetWidth, element.offsetHeight);
},

resize: function (width, height) {
    this.HORIZONTAL_MARGIN = (width - width *
        this.horizontalSizePercent) / 2;
    this.VERTICAL_MARGIN = (height - height *
        this.verticalSizePercent) / 2;
    this.cornerRadius = (this.context1.canvas1.height / 2 -
        2 * this.VERTICAL_MARGIN) / 2;
    this.top = this.VERTICAL_MARGIN;
    this.left = this.HORIZONTAL_MARGIN;
    this.right = this.left + width - 2 * this.HORIZONTAL_MARGIN;
    this.bottom = this.top + height - 2 * this.VERTICAL_MARGIN;

---

检索canvas元素的2dcanvas上下文的属性被调用

因此，您应该使用

this.context1.canvas

而不是

this.context1.canvas1

---

检索canvas元素的2dcanvas上下文的属性被调用

因此，您应该使用

this.context1.canvas

而不是

this.context1.canvas1