JSFiddle - React, Tailwind, and code Playground

CSS

#canva{
    outline:1px solid #f00;
}

JavaScript

var canvas ,ctx,ctxW = 500,ctxH = 500 ,img = {x:0,y: 0, width: 1920, height: 1000,res: new Image(), dragged: false, xOffset: 0 , yOffset: 0}
img.res.src = "https://million-wallpapers.ru/wallpapers/4/7/16522181621832325683/gonochnaya-mashina.jpg";
img.res.onload = function(){ 
ctx.drawImage(img.res,img.x,img.y,img.width,img.height);   
}
canvas = document.createElement("canvas");
canvas.id = "canva";
canvas.width = ctxW;
canvas.height = ctxH;
document.body.appendChild(canvas);
ctx = canvas.getContext("2d");
canvas.onmousedown = function(e){
    var xMouse = parseInt(e.clientX - this.offsetLeft);
    var yMouse = parseInt(e.clientY - this.offsetTop);
    if( xMouse >= img.x && xMouse <= img.x + img.width && yMouse >= img.y && yMouse <= img.y + img.height){
     img.xOffset = e.clientX - this.offsetLeft - img.x;
     img.yOffset = e.clientY - this.offsetTop - img.y;
     img.dragged = true;
    }
}
canvas.onmousemove = function(e){
 	if( img.dragged){
     	img.x = e.clientX - this.offsetLeft - img.xOffset;   
        img.y = e.clientY - this.offsetTop - img.yOffset;
        ctx.clearRect(0,0,ctxW,ctxH);
		ctx.drawImage(img.res,img.x,img.y,img.width,img.height);
        
    }
}
canvas.onmouseup = function(){
 	img.dragged = false;   
}