How to make a hole in polygon fabricjs

Question

I want to make a hole inside a polygon with fabricjs. I can do this using a regular html5 canvas counterclockwise as shown below, but I would rather use it with fabricjs. Does anyone know how to implement the attached image using "fabriicjs"?

Like this:

Answer 1

Here is one way to draw a polygon on FabricJS:

AFAIK, FabricJS does not yet support the composition necessary to create cutouts from its polygons, so here is a workaround.

• Draw a cutout polygon on html5 canvas. for example

  • .
  • .globalCompositeOperation='destination-out'. , "" .
  • .

• html5 canvas Fabric.Image.

  // Create your polygon with transparent cuts on this html5 canvas
  // Use destination-out compositing to "punch holes" in your polygon
  var html5canvas=document.getElementById('myhtml5CanvasElement');
  
  // then use the html5 canvas as an image source for a new Fabric.Image
  var c=new Fabric.Image(html5Canvas);