无法通过 id 获取 canvas 元素

Question

1我正在使用 canvas 编写绘图应用程序。 现在写了一个 class 来动态创建矩形，同时动态传递一个 id。 一切正常，但我无法通过 id 获取该元素，也不明白为什么。 这是代码片段：

    let numberRects = 0;
    class Rect {
        constructor (
            x = 100,
            y = 100,
            width = 100,
            height = 100,
            id = `rect${numberRects}`
        )
        {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.id = id;
            // console.log(this.id)// rect1
        }
        draw() {
            ctx.fillStyle = randomFill;
            ctx.fillRect(this.x, this.y, this.width, this.height);
            return ctx.fillStyle;
        }
    }
   
    
    function createRect() {
        numberRects++;
        rect = new Rect;
        rect.draw();
        return rect 
    }
    createRect()
    // Why can't I get this rect by id?
    let firstRect = document.getElementById('rect1')
    console.log(firstRect)// null (??)
    console.log(rect)// Rect {x: 100, y: 100, width: 100, height: 100, id: 'rect1'}
    firstRect = rect
    console.log(firstRect)// Rect {x: 100, y: 100, width: 100, height: 100, id: 'rect1'}
    console.log(firstRect.id)//rect1
    ```