<canvas id="myCanvas" width="500" height="400" style="border: 1px solid #c3c3c3;"></canvas>
<div id="cover" style="left: 100px; top: 100px">
</div>

 body {margin: 0;padding: 0;}div {border: solid 1px red;position: absolute;}canvas,div {position: absolute;left: 50px;top: 50px;}

 var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext("2d");var img = new Image();img.src = "Image/jugg.jpg";ctx.drawImage(img, 50, 50);var divObj = document.getElementById('cover');divObj.style.width = img.width + 'px';divObj.style.height = img.height + 'px';var x = 0;var y = 0;var moveFlag = false;var clickFlag = false;divObj.onmousedown = function (e) {moveFlag = true;clickFlag = true;var mWidth = e.clientX - this.offsetLeft;var mHeight = e.clientY - this.offsetTop;document.onmousemove = function (e) {clickFlag = false;if (moveFlag) {divObj.style.left = e.clientX - mWidth + 'px';divObj.style.top = e.clientY - mHeight + 'px';x = e.clientX - mWidth - canvas.offsetLeft;y = e.clientY - mHeight - canvas.offsetTop;if (e.clientX <= mWidth + canvas.offsetLeft) {divObj.style.left = canvas.offsetLeft + 'px';x = 0;}if (parseInt(divObj.style.left) + divObj.offsetWidth >= canvas.width + canvas.offsetLeft) {divObj.style.left = canvas.width - divObj.offsetWidth + canvas.offsetLeft + "px";x = canvas.width - divObj.offsetWidth;}if (e.clientY <= mHeight + canvas.offsetTop) {divObj.style.top = canvas.offsetTop + "px";y = 0;}if (parseInt(divObj.style.top) + divObj.offsetHeight >= canvas.height + canvas.offsetTop) {divObj.style.top = canvas.height - divObj.offsetHeight + canvas.offsetTop + "px";y = canvas.height - divObj.offsetHeight;}drawImg();divObj.onmouseup = function () {moveFlag = false;}}}}function drawImg() {ctx.clearRect(0, 0, 500, 400);ctx.drawImage(img, x, y);ctx.stroke();}