Как получить изображение в пути рисования с фоновым изображением в полотне ткани?

Question

Я хочу лассо культур в ткани холст. Теперь я могу рисовать дорожку на холсте. , но я не знаю, как вырезать путь с фоновым изображением. Есть ли способ сохранить изображение? Вот мой код

const canvas = document.getElementById('c'); 
    const ctx = canvas.getContext('2d'); 
    const img = document.createElement('IMG'); 

    const base64data = canvas.toDataURL("image/jpeg") 


    img.onload = function() { 
     const OwnCanv = new fabric.Canvas('c', { 
      isDrawingMode: true 
     }); 


     canvas.width = img.width; 
     canvas.height = img.height; 

     const imgInstance = new fabric.Image(img, { 
      async: false, 
      left: 0, 
      top: 0, 
      lockMovementX: true, 
      lockMovementY: true 
     }); 
     OwnCanv.add(imgInstance); 


     OwnCanv.freeDrawingBrush.color = "purple" 
     OwnCanv.freeDrawingBrush.width = 5 

     OwnCanv.on('path:created', function(option) { 
      const path = option.path; 
      OwnCanv.isDrawingMode = false; 
      OwnCanv.remove(imgInstance); 
      OwnCanv.remove(path); 
      OwnCanv.clipTo = function(ctx) { 
       path.render(ctx); 
      }; 
      OwnCanv.add(imgInstance); 
     }); 
    } 

img.src = base64data 

} 

Answer 1

Вы можете сделать это следующим образом:

OwnCanv.on('path:created', function(option) { 
    var path = option.path; 
    imgInstance.clipTo = function(ctx) { 
     //save context state 
     ctx.save(); 
     //reset context tranformation matrix 
     ctx.setTransform(1,0,0,1,0,0); 
     //render the path 
     path.render(ctx); 
     //restore context state 
     ctx.restore(); 
    }; 
    OwnCanv.renderAll();  
}); 

Смотрите здесь: https://jsfiddle.net/f82omjsr/