#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

HTML

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

JS

(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;
  canvas.add(group);
})()

Appreciate your help !!!

FIDDLE


Get this bounty!!!

Leave a Reply

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