Test fabricjs objectCaching and overlay blend mode

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.12/fabric.min.js"></script>
<canvas id="c" width="300" height="300"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');

var rect1 = new fabric.Rect({fill:"#ff7a7a",width:100,height:100,top:10});
var rect2 = new fabric.Rect({fill:"blue",width:100,height:50,left:50,globalCompositeOperation:"overlay",objectCaching:true,shadow:{blur:10,color:"black"}});
var rect3 = new fabric.Rect({fill:"blue",width:100,height:50,left:50,top:70,globalCompositeOperation:"overlay",objectCaching:false,shadow:{blur:10,color:"black"}});

canvas.add(rect1);
canvas.add(rect2);
canvas.add(rect3);