Как правильно мутировать элемент?

Question

[testkeyc]

Задача наследоваться от класса и потом мутировать метод create, чтобы сначала была конва, а после он выводил fillRect. Скажите в чем я ошибся?

class Draw {
    constructor(h, w, id) {
        this.h = h;
        this.w = w;
    }
    create(elem) {
        let createConvas = document.querySelector('div');
        createConvas.innerHTML = `<canvaswidth=${this.w} height=${this.h}></canvas>`;

        return createConvas;

    }
}

class Rect extends Draw {
    constructor(elem, x, y, w, h) {
        super(elem, x, w, h);
        this.y = y;
    }

    paitn() {
        let c = document.querySelector('.div-test');
        ctx.fillRect(20, 20, 150, 100);
        return c;
    }

}

let draw = new Draw(300, 300, '23');
draw.create();


let rect = new Rect(300, 300, '24');

rect.create();

Comments

[RAX7]

testkeyc https://qna.habr.com/help/rules пункт 6.6
Модератор тут мультиакк https://qna.habr.com/user/testtoster

Answer 1

[twobomb]

Типа такого?

class Draw {
    constructor(h, w, id) {
        this.h = h;
        this.w = w;
    }
    create(elem) {
        let createConvas = document.querySelector('div');
        createConvas.innerHTML = `<canvas width=${this.w} height=${this.h}></canvas>`;
        this.ctx = createConvas.querySelector("canvas").getContext("2d");
        return createConvas;

    }
}
class Rect extends Draw {
    constructor(elem, x, y, w, h) {
        super(elem, x, w, h);
        this.y = y;
    }
    create(elem) {
    	super.create(elem);
        this.ctx.fillRect(20, 20, 150, 100);
    }
}
let rect = new Rect(300, 300, '24');
rect.create();