Funky text

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<canvas id="c" width="600" height="400"></canvas>
<img style="border:1px solid black" src="" id="img">

JavaScript

var extend=fabric.util.object.extend,
			clone=fabric.util.object.clone;

	if(fabric.CurvedText){
		fabric.warn('fabric.CurvedText is already defined');
		return;
	}
	var stateProperties=fabric.Text.prototype.stateProperties.concat();
	stateProperties.push(
			'radius',
			'spacing',
			'reverse',
			'effect',
			'range',
			'largeFont',
			'smallFont'
			);
	var _dimensionAffectingProps=fabric.Text.prototype._dimensionAffectingProps;
	_dimensionAffectingProps['radius']=true;
	_dimensionAffectingProps['spacing']=true;
	_dimensionAffectingProps['reverse']=true;
	_dimensionAffectingProps['fill']=true;
	_dimensionAffectingProps['effect']=true;
	_dimensionAffectingProps['width']=true;
	_dimensionAffectingProps['height']=true;
	_dimensionAffectingProps['range']=true;
	_dimensionAffectingProps['fontSize']=true;
	// _dimensionAffectingProps['shadow']=true;
	_dimensionAffectingProps['largeFont']=true;
	_dimensionAffectingProps['smallFont']=true;
	_dimensionAffectingProps['fontFamily']=true;
	_dimensionAffectingProps['opacity']=true;
	_dimensionAffectingProps['angle']=true;
	// _dimensionAffectingProps['scaleY']=true;



	fabric.Group.prototype.delegatedProperties ={};
	var delegatedProperties=fabric.Group.prototype.delegatedProperties;

	delegatedProperties['backgroundColor']=true;
	delegatedProperties['textBackgroundColor']=true;
	delegatedProperties['textDecoration']=true;
	delegatedProperties['stroke']=true;
	delegatedProperties['strokeWidth']=true;
	delegatedProperties['shadow']=true;
	delegatedProperties['fontWeight']=true;
	delegatedProperties['fontStyle']=true;
	delegatedProperties['strokeWidth']=true;
	delegatedProperties['textAlign']=true;
	delegatedProperties['fontFamily']=true;
	delegatedProperties['fontSize']=true;
	delegatedProperties['fill']=true;
	delegatedProperties['opacity']=true;
	delegatedProperties['effect']=true;
	delegatedProperties['angle']=true;
	delegatedProperties['globalCompositeOperation']=true;

	/**
	 * Group class
	 * @class...