JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<b>Наведите курсор и кликните, чтобы сохранить в выбранной области.</b>
<canvas id="myCanvas" width="690px" height="460px">
</canvas>
</body>

CSS

body{
    cursor: move;
    background-color: rgb(200,223,223);
}

JavaScript

$(document).ready(function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var mouse = {
    x: 0,
    y: 0
}
var timer;
c.onmousemove = function(e) {
        mouse = {
            x: e.pageX - this.offsetLeft,
            y: e.pageY - this.offsetTop
        };
    }
var img = new Image();
img.src = "http://dimazsever.ru/xxx/anonym3.png";
var back = new Image();
back.src = "http://dimazsever.ru/xxx/z_0708b0c4.jpg"
ctx.drawImage(back,0,0);
function start_drawing(){
c.width = c.width;
ctx.drawImage(img,mouse.x-60,mouse.y-84,120,168);
}
$(img).load(function(){
timer = setInterval(start_drawing, 20);
});
$('canvas').click(function(){
clearInterval(timer);
$('body').css("cursor","auto");
});
});