How to properly mutate an element?

Question

Software design

The task is to inherit from the class and then mutate the create method so that first there is a conva, and then it outputs fillRect. Tell me what did I do wrong?

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();

Answer 1

How to make such an application?
- Hire developers and designers, i.e. command
What languages ​​and technologies? - A full stack of technologies, a
rich and complex front-end and no less complex back-end so that it all works as it should and looks adequate .
otherwise the question would have been more detailed.

Answer 2

Map + points - can be built on the Yandex or Google Maps API .
Chat with media download - screw yours.
For example, the description "Balloon" in Yandex maps shows how to insert any HTML content.
I doubt about its interactive capabilities - whether it will be possible to keep a full-fledged interactive chat there. Maybe non-realtime comments will suffice for you?

Answer 3

Like this?

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();