I apply jcanvaScript (JavaScript library)
on the canvas element there are some images how it is possible to trade places images (after a click a mouse for example)?
function start(){
// Add mouse listener.
canvas = document.getElementById('firstCanvas');
canvas.addEventListener('click',coordinateClick);
var img =[];
for(var i=0;i<16;i++){
img[i]=new Image;
img[i].src="./image/"+i+".png";
}
jc.start('firstCanvas',true);
function allOnloadImages(){//initialization by canvas id
for(var i=0;i<16;i++){
jc.image(img[i],cordinaImg[i][0],cordinaImg[i][1]).id('img'+i);
};
};
jc.start('firstCanvas');
for(var i=0;i<img.length;i++){
img[i].onload=allOnloadImages;
}
}
function coordinateClick(e){
...
//here we interchange the position of pictures
jc('#img'+i).translateTo(cordinaImg[numberFieldEmpty][0],cordinaImg[numberFieldEmpty][1]+11);
jc('#img15').translateTo(cordinaImg[i][0],cordinaImg[i][1]+11);
...
}
Thus there is a bifurcating of pictures, that is two copies of the same picture... for example if so won't remove anything
jc('#img'+i).del();//
