Javascript 图像未正确放置在画布上

在JSFIDLE上方，将图像放到画布上 问题是当我把代码放在网站上时 把图像放在最右边，而不是我放的地方

function init() {
    var canvas = document.getElementById("graphCanvas");
    var context = canvas.getContext("2d");

    context.lineWidth = 2;
}
var pos;
function allowDrop(ev) {
    ev.preventDefault();
}
function get_pos(ev){
    pos = [ev.pageX, ev.pageY];
}
function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var offset = ev.dataTransfer.getData("text/plain").split(',');
    var data=ev.dataTransfer.getData("Text");

    var img = canvas = document.getElementById("img1");
    var dx = pos[0] - img.offsetLeft;
    var dy = pos[1] - img.offsetTop;
 document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data), ev.pageX - dx, ev.pageY - dy);
}

---

您还需要考虑canvas元素的相对位置

见：

---

在Chrome31XP上运行良好。你们在测试什么浏览器？它现在可以正常工作，但当我把它放在网页相对区域的画布上时，它就不能正常工作了

var img = document.getElementById("img1");
var canvas = document.getElementById("graphCanvas");
var dx = pos[0] - (img.offsetLeft - canvas.offsetLeft);
var dy = pos[1] - (img.offsetTop - canvas.offsetTop);