Drag image on a canvas HTML5

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

Unknown Unknown · Accepted Answer · 2017-09-28T06:55:38

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

Drag image on a canvas HTML5

1 Answers