ファブリックキャンバスの背景イメージを使用して描画パスでイメージを取得する方法は？

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/