Просмотр большой картинки

by twobomb three

HTML

<p>Наведите на картинку, зажмите ЛКМ и потащите</p>
<canvas id="canvas" width=500 height=500 ></canvas>

CSS

p{
  user-select:none;
  background:yellow;
}
canvas:hover{
  cursor:pointer;
}
canvas:active{
  cursor:move;
}

JavaScript

var dragObj = {w:0,h:0,dragged:false,x:0,y:0,lx:0,ly:0}
var ctx = document.all.canvas.getContext("2d");
var img = new Image();
img.src = "https://img2.goodfon.ru/original/3024x2000/0/1b/auto-cars-chevrolet.jpg";
img.onload = function(){
dragObj.w = img.width;
dragObj.h = img.height;
dragObj.x = -(img.width/2 - 500/2);
dragObj.y = -(img.height/2 -  500/2);

reDraw();
}
$("#canvas").bind("mousedown",function(e){
	dragObj.lx = e.clientX;
  dragObj.ly = e.clientY;
  dragObj.dragged = true;
})
document.onmouseup = function(){
	dragObj.dragged = false;
}
$("#canvas").bind("mousemove",function(e){
	if(!dragObj.dragged)
  	return;
    dragObj.x += e.clientX - dragObj.lx;
     dragObj.lx = e.clientX;
    dragObj.y += e.clientY - dragObj.ly;
     dragObj.ly = e.clientY;
     
    reDraw();
});
function reDraw(){
     if(dragObj.x > 0)
     		dragObj.x  = 0;
      if(dragObj.x + dragObj.w < 500 )
      dragObj.x = 500 - dragObj.w ;
     
     if(dragObj.y > 0)
     		dragObj.y  = 0;
      if(dragObj.y + dragObj.h < 500 )
      dragObj.y = 500 - dragObj.h ;
	ctx.drawImage(img,dragObj.x,dragObj.y);
}