如圖

這張是網頁上的畫面
我用css把canvas變成圓的
雖然在網頁上不會顯示

下面這張是我存起來的圖片

我把canvas變成圖片存起來後
會存成完整的正方形canvas
而不是我想要的圓形圖片

請問我該怎麼把canvas存成圓形圖片?

以下是程式碼

        const canvas = new fabric.Canvas('canvas', {
            width: 650,
            height: 650,
        })

        // 下載圖片到後端
        function dlimg() {
            // 建立 file

            const dataURL = canvas.toDataURL('image/png')
            const blobBin = atob(dataURL.split(',')[1])
            const array = []
            for (let i = 0; i < blobBin.length; i++) {
                array.push(blobBin.charCodeAt(i))
            }
            const file = new Blob([new Uint8Array(array)], {type: 'image/png'})
            console.log(file)
            // 將file 加至 formData
            let formData = new FormData()
            formData.append('file', file, 'test.png');
            console.log(formData)
            formData.append('_token', '{{ csrf_token() }}');

            //real ajax
            jQuery.ajax({
                url: '{{route('test3222.upload')}}',
                type: "POST",
                dataType: "html",
                contentType:false,
                processData:false,
                data: formData,
                success: function (response) {
                    console.log('success!');
                }
            });
        }