function drawImage() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var image = document.getElementById("image");
    ctx.drawImage(image,
        canvas.width / 2 - image.width / 2,
        canvas.height / 2 - image.height / 2
    );
}

var mousePosition;
var offset = [0, 0];
var div;
var isDown = false;

div = document.getElementById('square');

document.body.appendChild(div);

div.addEventListener('mousedown', function (e) {
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function () {
    isDown = false;
}, true);

document.addEventListener('mousemove', function (event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {

            x: event.clientX,
            y: event.clientY

        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

How to set the position so that the image portion contained in the red square is mounted on the canvas?

This exemple x & y are set to be on the middle, but it should be where ever the child element(red border) is, relative to the parent element(orage border)