Estoy dibujando un rectangle usando fabric js con mousemove . Quiero cortar una parte de la imagen de fondo del canvas que viene dentro del área del rectangle y luego obtener la parte cortada de la imagen como un object y pegarla en cualquier otro lugar del lienzo. Es como arrastrar esa parte cortada.

Intenté hacerlo con clipPath :

 var marq_rect, isDown, origX, origY, marqer; canvas.on('mouse:down', function (o) { isDown = true; canvas.set({ 'selection': false }); var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var pointer = canvas.getPointer(oe); marq_rect = new fabric.Rect({ left: origX, top: origY, originX: 'left', originY: 'top', width: pointer.x - origX, height: pointer.y - origY, angle: 0, fill: 'transparent', stroke: 'black', strokeDashArray: [2, 2], strokeDashOffset: 20, strokeWidth: 2, transparentCorners: false, id: 'marq_rect' }); canvas.add(marq_rect); canvas.on('mouse:move', function (o) { if (!isDown) return; var pointer = canvas.getPointer(oe); if (origX > pointer.x) { marq_rect.set({ left: Math.abs(pointer.x) }); } if (origY > pointer.y) { marq_rect.set({ top: Math.abs(pointer.y) }); } marq_rect.set({ width: Math.abs(origX - pointer.x) }); marq_rect.set({ height: Math.abs(origY - pointer.y) }); canvas.requestRenderAll(); }); canvas.on('mouse:up', function (o) { isDown = false; canvas.set({ 'selection': true }); bg_image.clipPath = marq_rect; canvas.requestRenderAll(); });

Debe tener un aspecto como este:

Puede ver que parte de la imagen dentro del rect está recortada y se puede arrastrar. También puede ser un círculo o cualquier otra forma en lugar de un rectángulo. Gracias por adelantado.