#StackBounty: #javascript #canvas #html5-canvas #fabricjs #fabricjs2 FabricJS clippath border color and move the overlay image behind c…

Bounty: 50

I am trying to add the clippath area(rect object) over canvas using fabricJS. Currently i set Overlay Image to the canvas and in addition to that am adding clippath area to place objects. I successfully able to place the object inside the clippath, but the problem is whatever image i place it inside clippath has opacity(means object also has transparency), i know is because i set transparent image as overlay which is always top over other object.

My query is

  1. Can i set the clippath area alone to ignore overlay? Or atleast to set the preference like clippath is first priority and next overlay?
  2. Currently clippath has no border and i couldn’t know where the clippath is? So is there a way to set the border over clippath area?

Here is my below code


<canvas id="ex8" width="300" height="400"></canvas>


(function() {
  var canvas = new fabric.Canvas('ex8');
  canvas.controlsAboveOverlay = true;
  var clipPath = new fabric.Rect({ width: 100, height: 100, fill: 'red' , top:100, left: 100});
   canvas.setOverlayImage("https://i.ibb.co/88QkSMC/crew-front.png", canvas.renderAll.bind(canvas), {

  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red',globalCompositeOperation : 'xor' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  canvas.clipPath = clipPath;

Appreciate your help !!!


Get this bounty!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.