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);

¿Cómo establecer la posición para que la parte de la imagen contenida en el cuadrado rojo se monte en el lienzo?

Este ejemplo x & y está configurado para estar en el medio, pero debería estar donde esté el elemento secundario (borde rojo), en relación con el elemento principal (borde naranja)