Erasing Lines on Fabric JS

Question

I am using FabricJS to draw and erase lines on top of an image. I made 2 layers for the canvas, with the bottom layer as the background image and the top layer for sketching. Whenever I erase the markings, if I use freeDrawingBrush.color =white, or any basic color, it gets erased. However, if I use transparent, 'rgba(0,0,0,0)', as the color of the freeDrawingBrush, the markings are not erased.

How can I erase the marking on the top layer with a transparent as the background of the path created as I erase?

<div style="position: relative;">
    <canvas id="my-canvas" width="800" height="400" style="position: absolute; left: 0; top: 0; z-index: 1;background-color:rgba(0,0,0,0)"> </canvas> 
    <canvas id="layer3" width="800" height="400" style="position: absolute; left: 0; top: 0; z-index: 0;background-image:url(http://gallery.nanfa.org/d/52271-3/DSC_7537.jpg);"></canvas>
</div>

<script>
 canvas = window._canvas = new fabric.Canvas('layer1');
 canvas.isDrawingMode= 1;
 canvas.freeDrawingBrush.width = 10;
 canvas.renderAll();

//eraser function
 function eraser(){
  canvas.freeDrawingBrush.color = "white"; // if "rgba(0,0,0,0)", not work
  canvas.on('path:created', function (opt) {
      opt.path.globalCompositeOperation = 'destination-out';
      canvas.renderAll();
  });
}

//drawing function
function draw(){
    canvas.freeDrawingBrush.color = "black";
    canvas.on('path:created', function (opt) {
        opt.path.globalCompositeOperation = 'source-over';
        canvas.renderAll();
    });
}

</script>

Im using fabricjs on html https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js

Any help will be very much appreciated. Thanks in advance!