Drag image on a canvas HTML5 - image

Question

I have a canvas and a load an image on it. I want to make this image draggable. My code so far is:
$(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';
}
i found this tutorial http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/
and also this one http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-an-image-tutorial/ but I couldn't successfully apply them in my case. You someone provide me with the easiest solution?
Thanks is advance

Answer 1

Use rescaling, mouse event handlers, and offsets. For example:
var canvas;
var ctx;
var status;
var isMouseDown = false;
// Canvas Dimensions
var cw = 0;
var ch = 0;
// Puck Dimensions (and Half thereof)
var pw = 30;
var ph = 30;
var pw2 = 0;
var ph2 = 0;
// Puck Position
var px = 50;
var py = 100;
// cursor offset relative to the puck
var cx = 0;
var cy = 0;
// Attr:Actual dimensions Scale
var sx = 1.0;
var sy = 1.0;
function Init()
{
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
status = document.getElementById("status");
cw = canvas.width;
ch = canvas.height;
// get the scale based on actual width;
sx = cw / canvas.offsetWidth;
sy = ch / canvas.offsetHeight;
// Rescale the puck
pw = pw * sx;
ph = ph * sy;
pw2 = pw/2;
ph2 = ph/2;
// Rescale the puck position
px = px * sx;
py = py * sy;
status.innerHTML = "Attr:" + canvas.width + "," + canvas.height
+ "; Actual:" + canvas.offsetWidth + "," + canvas.offsetHeight
+ "; Scale:" + sx + "," + sy
+ "; Puck:" + pw + "," + ph;
canvas.onmouseup = MouseUp;
canvas.onmousedown = MouseDown;
canvas.onmousemove = MouseMoved;
return setInterval(Repaint, 10); // repaint the canvas at intervals
}
function Repaint()
{
// Clear the canvas
ctx.clearRect(0, 0, cw, ch);
// Draw the background
DrawRect(0, 0, cw, ch, "rgb(220,220,190)");
// Draw the puck
DrawRect(px, py, pw, ph, "blue");
}
function DrawRect(x, y, w, h, colour)
{
ctx.fillStyle = colour;
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.closePath();
ctx.fill();
}
function MouseMoved(e)
{
status.innerHTML = "Cursor[" + e.pageX + ", " + e.pageY + "], Offset["
+ (e.pageX - canvas.offsetLeft) + ", " + (e.pageY - canvas.offsetTop) + "]";
if ( IsCursorOverPuck(e.pageX, e.pageY) )
{
document.body.style.cursor = 'pointer';
}
else
{
document.body.style.cursor = 'default';
}
if (isMouseDown)
{
px = (e.pageX - canvas.offsetLeft)*sx - cx*sx;
py = (e.pageY - canvas.offsetTop)*sy - cy*sy;
status.innerHTML = "mouse down. Offset[" + cx + ", " + cy + "], Puck[" + px + ", " + py + "]";
}
}
function MouseUp()
{
isMouseDown = false;
}
function MouseDown(e)
{
if ( IsCursorOverPuck(e.pageX, e.pageY) )
{
cx = (e.pageX - canvas.offsetLeft)*sx - px;
cy = (e.pageY - canvas.offsetTop)*sy - py;
isMouseDown = true;
}
}
function IsCursorOverPuck(x, y)
{
status.innerHTML = "Cursor[" + x + ", " + y + "], CanvasOffset["
+ (x - canvas.offsetLeft) + ", " + (y - canvas.offsetTop) + "], Puck["
+ px + ", " + py + "]";
return (x - canvas.offsetLeft) * sx > px && (x - canvas.offsetLeft) * sx < px + pw
&& (y - canvas.offsetTop) * sy > py && (y - canvas.offsetTop) * sy < py + ph;
}
Init();
<canvas id="canvas" width="400" height="300"></canvas>
<div id="status"></div>
References
Drag-n-Drop with HTML Canvas – GkSpk