SO - drag image

by Nick Hulea

HTML

<canvas id="canvas" width=400 height=400></canvas>
<img id="img" src="http://i.imgur.com/ymIVA0Ub.jpg" style="visibility:hidden" />

CSS

#canvas {background:#777}

JavaScript

var ctx = canvas.getContext('2d');

canvas.onmousemove = function(e) {

    /// correct mouse position so its relative to canvas
    var rect = canvas.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, x, y);
}