Currently, I have a fabric.JS canvas where objects can be added. However, I am interested in clipping these objects into an oval shape, similar to the clip demos on fabricjs.com.
In my current project (JSFiddle), I have been able to crop the object into a circle shape.
var canvas = new fabric.Canvas("c");
canvas.isDrawingMode = false;
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 200,
height: 200
});
$("#clipCircle").click(function() {
var obj = canvas.getActiveObject();
if (!obj) return;
if (obj.clipTo) {
obj.clipTo = null;
} else {
var radius = obj.width < obj.height ? (obj.width / 2) : (obj.height / 2);
obj.clipTo = function(ctx) {
ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
};
}
canvas.renderAll();
});
// "add" rectangle onto canvas
canvas.add(rect);
// select, draw
$("#select").click(function() {
canvas.isDrawingMode = false;
});
$("#draw").click(function() {
canvas.isDrawingMode = true;
});
var activeObject = null;
canvas.on('selection:created', function(options) {
activeObject = options.target;
$("#alpha").slider("option", "value", activeObject.opacity);
});
canvas.on('selection:updated', function(options) {
activeObject = options.target;
$("#alpha").slider("option", "value", activeObject.opacity);
});
canvas.on('selection:cleared', function(options) {
activeObject = null;
});
$("#alpha").slider({
max: 1,
min: 0,
step: 0.1,
value: 1,
slide: function(event, ui) {
activeObject && (activeObject.opacity = ui.value)
canvas.requestRenderAll();
},
stop: function(event, ui) {
canvas.requestRenderAll();
}
});canvas {
border: solid 1px #000;
}
fieldset {
max-width: 350px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<br>
<button id="draw">Draw</button>
<button id="select">Select</button>
<button id="clipCircle">Crop to Circle</button>
<button id="clipOval">Crop to Oval</button>
<br>
<br>
<fieldset>
<legend>Controls</legend>
<label for="alpha">Opactity</label>
<div id="alpha" name="alpha"></div>
</fieldset>I would appreciate any guidance on how to achieve this oval cropping effect. Thank you!