マウスオーバーオブジェクトが機能していません

Question

window.onload = function（）{}内のオブジェクトをキャンバスに追加しましたが、オブジェクト上にマウスを移動すると、ホバリング効果がなくなり、オブジェクトを選択します。私はobject.setCoords、canvas.calcOffset、canvas.renderAllを試しましたが、それでも私は続行できません。以下は私のサンプルコード、

window.onload = function(){ 
setbackgroundImage(); 
drawExistingShapes(); 
} 
$(document).ready(function() { 
var canvas = new fabric.Canvas('canvas'); 
document.getElementById("canvas").fabric = canvas; 
} 
function setbackgroundImage(){ 
var canvas = document.getElementById("canvas").fabric; 
canvas.setBackgroundImage('file:///D:/New folder/Images/roi_image.png', canvas.renderAll.bind(canvas), { 
    width: canvas.width, 
    height: canvas.height, 
    backgroundColor:'white', 
    originX: 'left', 
    originY: 'top' 
}); 
} 
function drawExistingShapes(){ 
var canvas = document.getElementById("canvas").fabric; 
var points= [{"x":306,"y":136.98076211353316},{"x":261,"y":162.96152422706632},{"x":261,"y":111}]; 
var shape= new fabric.Polygon(points, { 
     fill: "transparent", 
     strokeWidth: 0.75, 
     stroke: 'rgb(255,0,0)', 
     borderColor: 'red', 
     cornerColor: 'green', 
     cornerSize: 6, 
     transparentCorners: false 
     }); 
     shape.setCoords(); 
     canvas.add(shape); 
     canvas.renderAll(); 
     canvas.calcOffset(); 

} 

Answer 1

は同時にwindow.onloadと$(document).readyを使用しないでくださいです。コードを移動する必要がありますwindow.onload

$(document).ready(function() { 
    var canvas = new fabric.Canvas('canvas'); 
    document.getElementById("canvas").fabric = canvas; 
    setbackgroundImage(); 
    drawExistingShapes(); 
});