I am currently using fabric.js version 5.3.0 and I have a requirement to clone curved text and add it to the canvas.
Description: The issue I am facing is that the cloning functionality does not work properly with curved text. The cloned object does not return the same as the original one. You can check the problem by visiting the following fiddle: https://jsfiddle.net/Niketa_patel/snw9yx21/7/
Below is the code snippet:
(function (fabric) {
/*
* CurvedText object for fabric.js
* @author Arjan Haverkamp (av01d)
* @date January 2018
*/
// Rest of the JavaScript code...
})(typeof fabric !== "undefined" ? fabric : fabric);
var fcanvas = new fabric.Canvas('canv');
// Creating a curved text object
const curvedText = new fabric.CurvedText('It feels so nice to be able to draw', {
diameter: 360,
fontSize: 32,
fontFamily: 'Arial',
left: 50,
top: 50,
fill: 'red'
});
let democopy = {};
// Adding the curved text to the canvas
fcanvas.add(curvedText);
// Cloning the curved text
curvedText.clone(cloned=>{
console.log(cloned,'curvedText');
democopy = cloned;
})
// Cloning the cloned text
democopy.clone(cloned=>{
console.log(cloned,'cloned');
console.log(curvedText,'curvedText')
fcanvas.add(cloned);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<canvas id="canv" width="500" height="300" style="border: 1px solid rgb(204, 204, 204); width: 400px; height: 400px; -webkit-user-select: none;"></canvas>Thank you :)