html5分层,在html5 canvas标签中创建图像的分层树结构？

在一组图像之间存在树状分层关系，我希望图像在画布标签中被表示为一个树结构，子节点图像小于父节点图像，所有图像都应该在鼠标悬停时放大一些值。

setscale和翻译的JavaScript函数让我做缩放效果好，但我不能让鼠标事件监听器功能正常工作，鼠标悬停和鼠标没有被检测到，虽然图像显示。我没有收到我用于调试的警报消息。这只是一个测试代码： -

function loadImages(sources, callback){

var images = {};

var loadedImages = 0;

var numImages = 0;

// get num of sources

for (var src in sources) {

numImages++;

}

for (var src in sources) {

images[src] = new Image();

images[src].onload = function(){

if (++loadedImages >= numImages) {

callback(images);

}

};

images[src].src = sources[src];

}

}

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var destX = 20;

var destY = 20;

var destWidth = 200;

var destHeight = 137;

var sources = new Array();

sources[0]="darth-vader.jpg";

sources[1]="darth-vader.jpg";

var imageObj = new Image();

loadImages(sources, function(images){

context.drawImage(images[0], destX, destY, destWidth, destHeight);

images[0].οnmοuseοver=function()

{

alert('1');

}

images[0].οnmοuseοut=function()

{

alert('2');

}

context.drawImage(images[1], destX+200,destY, destWidth, destHeight);

images[1].οnmοuseοver=function()

{

alert('3');

}

images[1].οnmοuseοut=function()

{

alert('4');

}

});

};