Image 在画布上拖动图像HTML5

我有一张画布，上面有一张图片。我想让这张图片可以拖动。到目前为止，我的代码是：

$(document).ready(function() {
    loadImagetoEdit();
});

function loadImagetoEdit() {

   canvas = document.getElementById("myCanvas");
   ctx = canvas.getContext("2d");

   imageObj = new Image();      
   imageObj.onload  = function(){
       ctx.drawImage(this, 0, 0, 100, 100);        
   };
   imageObj.src = 'myImage.png';

 } 

我找到了这个教程 还有这个，但我无法成功地将它们应用到我的案例中。有人能给我提供最简单的解决方案吗

---

感谢advance

使用重缩放、鼠标事件处理程序和偏移量。例如：

var画布；
var-ctx；
var状态；
var isMouseDown=错误；
//画布尺寸
var-cw=0；
var-ch=0；
//圆盘尺寸（及其一半）
var-pw=30；
var-ph=30；
var pw2=0；
var-ph2=0；
//冰球位置
var-px=50；
var-py=100；
//光标相对于圆盘的偏移量
var-cx=0；
var-cy=0；
//属性：实际尺寸比例
var sx=1.0；
var-sy=1.0；
函数Init（）
{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
状态=document.getElementById（“状态”）；
cw=画布宽度；
ch=画布高度；
//根据实际宽度得到刻度；
sx=cw/canvas.offsetWidth；
sy=ch/canvas.offsetHeight；
//重新缩放冰球
pw=pw*sx；
ph=ph*sy；
pw2=pw/2；
ph2=ph2/2；
//重新调整冰球的位置
px=px*sx；
py=py*sy；
status.innerHTML=“Attr:“+canvas.width+”，“+canvas.height”
+“实际：“+canvas.offsetWidth+”，“+canvas.offsetHeight”
+“刻度：“+sx+”，“+sy”
+冰球：“+pw+”，“+ph；
canvas.onmouseup=MouseUp；
canvas.onmousedown=MouseDown；
canvas.onmousemove=MouseMoved；
return setInterval（Repaint，10）；//每隔一段时间重新绘制画布
}
函数重新绘制（）
{
//清理画布
ctx.clearRect（0，0，cw，ch）；
//画背景
DrawRect（0，0，cw，ch，“rgb（220190）”；
//抽冰球
DrawRect（px、py、pw、ph，“蓝色”）；
}
函数DrawRect（x、y、w、h、颜色）
{    
ctx.fillStyle=颜色；
ctx.beginPath（）；
ctx.rect（x，y，w，h）；
ctx.closePath（）；
ctx.fill（）；
}
MouseMoved函数（e）
{
status.innerHTML=“游标[“+e.pageX+”，“+e.pageY+”]，偏移量[”
+（e.pageX-canvas.offsetLeft）+“，”+（e.pageY-canvas.offsetTop）+“]”；
如果（IsCursorOverPuck（e.pageX，e.pageY））
{
document.body.style.cursor='pointer'；
}
其他的
{
document.body.style.cursor='default'；
}
如果（isMouseDown）
{
px=（e.pageX-canvas.offsetLeft）*sx-cx*sx；
py=（e.pageY-canvas.offsetTop）*sy-cy*sy；
status.innerHTML=“鼠标按下。偏移量[“+cx+”，“+cy+”]，圆盘[“+px+”，“+py+”]；
}
}
函数MouseUp（）
{
isMouseDown=错误；
}
功能鼠标向下（e）
{
如果（IsCursorOverPuck（e.pageX，e.pageY））
{
cx=（e.pageX-canvas.offsetLeft）*sx-px；
cy=（e.pageY-canvas.offsetTop）*sy-py；
isMouseDown=真；
}
}
函数IsCursorOverPuck（x，y）
{
status.innerHTML=“游标[“+x+”，“+y+”]，CanvaOffset[”
+（x-canvas.offsetLeft）+“，”+（y-canvas.offsetTop）+“]，Puck[”
+px+”，“+py+”]；
返回（x-canvas.offsetLeft）*sx>px&（x-canvas.offsetLeft）*sxpy&（y-画布偏移量）*sy