Я не могу выбрать объект fabric.js

Question

Я новичок в fabric.js.И я хочу нарисовать Эллипс на холсте.когда я рисую, но не могу выбрать.Я добавил прослушиватель событий к объекту, событие также не сработало.

Код выглядит следующим образом.

import { fabric } from 'fabric'

export class EllipseManager {
    isDrawing = false
    object: fabric.Ellipse
    initPos: fabric.Point
    constructor(
        private canvas: fabric.Canvas
    ) {
        this.canvas.setCursor('crosshair')
        this.canvas.on('mouse:down', this.onMouseDown)
        this.canvas.on('mouse:move', this.onMouseMove)
        this.canvas.on('mouse:up', this.onMouseUp)
    }

    destroy() {
        // unbind event
    }

    private onMouseDown = (option) => {
        this.isDrawing = true
        this.initPos = option.pointer
        this.object = new fabric.Ellipse({
            rx: 0,
            ry: 0,
            fill: 'red',
            top: option.pointer.y,
            left: option.pointer.x,
        })
        this.canvas.add(this.object)
        // for test
        this.object.on('mousedown', (e) => console.log(e))
        console.log(this.object)
    }

    private onMouseMove = (event) => {
        if (!this.isDrawing) return
        const currentPos = event.pointer
        const x = currentPos.x - this.initPos.x
        const y = currentPos.y - this.initPos.y

        this.object.setOptions({
            rx: Math.abs(x/2),
            ry: Math.abs(y/2)
        })

        // as x, y is smaller than 0 , so use '+'
        if (x < 0) {
            this.object.setOptions({
                left: this.initPos.x + x,
            })
        }

        if ( y < 0) {
            this.object.setOptions({
                top: this.initPos.y + y,
            })
        }
    }

    private onMouseUp = () => {
        this.isDrawing = false
    }
}

Я искал много демо, не могу найти, где отличается.

Мой холст похож на эту картину.эти два эллипса не могут быть выбраны, и граница события не может быть запущена.