Javascript 仅当在canvas Fabric JS上选择时，图像才会显示

我试图用fabric JS在画布上添加图像，但图像仅在单击或选择其周围区域（即组对象）时显示。 页面加载完成后，图像应该立即显示。 下面是源代码的片段。任何帮助都将不胜感激

const canvas=new fabric.canvas（'canvas'{
选择：false
});
const circle=新结构。circle({
左:100,，
前100名，
半径：50，
填写：“#eef”，
原文：“中心”，
原创：“中心”
});
const text=new fabric.text（'Hello World'{
左：圆圈，左，
顶部：圆圈，顶部，
fontFamily：“Arial”，
fontWeight:'粗体'，
尺寸：10，
填充：“黑色”，
原文：“中心”，
原文：'中心'，
});
const group=new fabric.group（[circle，text]{
左：圆圈，左，
顶部：圆圈，顶部，
原文：“中心”，
原创：“中心”
});
canvas.add（组）；
fabric.Image.fromURL（'http://placekitten.com/200/300，函数（img）{
canvas.add（img.set({
左：组。左+20，
top:group.top，
perPixelTargetFind：对，
填充：0，
哈斯：错，
哈斯：错，
宽度：16，
身高：16，
原文：“中心”，
原文：'中心'，
}));
img.on（'click'，函数（）{
log（'img clicked'）；
});
});
您需要使用
鼠标向下
事件而不是
单击
。如果您是从另一台服务器加载，请为图像对象使用
crossOrigin
属性

演示


const canvas=new fabric.canvas（'canvas'{
选择：false
});
const circle=新结构。circle({
左:100,，
前100名，
半径：50，
填写：“#eef”，
原文：“中心”，
原创：“中心”
});
const text=new fabric.text（'Hello World'{
左：圆圈，左，
顶部：圆圈，顶部，
fontFamily：“Arial”，
fontWeight:'粗体'，
尺寸：10，
填充：“黑色”，
原文：“中心”，
原文：'中心'，
});
const group=new fabric.group（[circle，text]{
左：圆圈，左，
顶部：圆圈，顶部，
原文：“中心”，
原创：“中心”
});
canvas.add（组）；
fabric.Image.fromURL（'http://placekitten.com/200/300，函数（img）{
img.set({
左：组。左+20，
top:group.top，
perPixelTargetFind：对，
填充：0，
哈斯：错，
哈斯：错，
宽度：16，
身高：16，
原文：“中心”，
原文：'中心'，
})
canvas.add（img）；
img.on（'mousedown'，function（）{
log（'img clicked'）；
});
}, {
交叉原点：“annonymous”
});
您需要使用
鼠标向下
事件而不是
单击
。如果您是从另一台服务器加载，请为图像对象使用
crossOrigin
属性

演示


const canvas=new fabric.canvas（'canvas'{
选择：false
});
const circle=新结构。circle({
左:100,，
前100名，
半径：50，
填写：“#eef”，
原文：“中心”，
原创：“中心”
});
const text=new fabric.text（'Hello World'{
左：圆圈，左，
顶部：圆圈，顶部，
fontFamily：“Arial”，
fontWeight:'粗体'，
尺寸：10，
填充：“黑色”，
原文：“中心”，
原文：'中心'，
});
const group=new fabric.group（[circle，text]{
左：圆圈，左，
顶部：圆圈，顶部，
原文：“中心”，
原创：“中心”
});
canvas.add（组）；
fabric.Image.fromURL（'http://placekitten.com/200/300，函数（img）{
img.set({
左：组。左+20，
top:group.top，
perPixelTargetFind：对，
填充：0，
哈斯：错，
哈斯：错，
宽度：16，
身高：16，
原文：“中心”，
原文：'中心'，
})
canvas.add（img）；
img.on（'mousedown'，function（）{
log（'img clicked'）；
});
}, {
交叉原点：“annonymous”
});


const canvas=new fabric.canvas（'canvas'{
选择：false
});
const circle=新结构。circle({
左:100,，
前100名，
半径：50，
填写：“#eef”，
原文：“中心”，
原创：“中心”
});
const text=new fabric.text（'Hello World'{
左：圆圈，左，
顶部：圆圈，顶部，
fontFamily：“Arial”，
fontWeight:'粗体'，
尺寸：10，
填充：“黑色”，
原文：“中心”，
原文：'中心'，
});
const group=new fabric.group（[circle，text]{
左：圆圈，左，
顶部：圆圈，顶部，
原文：“中心”，
原创：“中心”
});
canvas.add（组）；
fabric.Image.fromURL（'http://placekitten.com/200/300，函数（img）{
canvas.add（img.set({
左：组。左+20，
top:group.top，
perPixelTargetFind：对，
填充：0，
哈斯：错，
哈斯：错，
宽度：16，
身高：16，
原文：“中心”，
原文：'中心'，
}));
/*将不起作用-请使用mousedown或使用fabric提供的事件
img.on（'click'，函数（）{
log（'img clicked'）；
});
*/
//如果要从其他域加载图像，请使用此选项
}，{crossOrigin:'匿名'}）；
常量mouseDownHandler=（e）=>{
log（'mouseDownHandler:yep！有人在画布上点击了”）；
if（e.target&&e.target.type==“image”）console.log（'mouseDownHandler:and smasted image！'）；
}
const selectionCreatedHandler=（e）=>{
if（e.target&&e.target.type==“image”）console.log（'selectionCreatedHandler:yep！有人选择了image'）
}
常量selectionUpdatedHandler=（e）=>{
if（e.target&&e.target.type==“image”）console.log（'selectionUpdatedHandler:yep！有人选择了对象而不是以前选择的对象'）
}
canvas.on（'selection:created'，selectionCreatedHandler）；
canvas.on（'selection:updated'，selectionUpdatedHandler）；
on（'mouse:down'，mouseDownHandler）


const canvas=new fabric.canvas（'canvas'{
选择：false
});
const circle=新结构。circle({
左:100,，