JSFiddle - React, Tailwind, and code Playground

by Kesavamoorthi Subramanian

HTML

<div id="text-curve-preview-container">
    <img id="text-curve-preview-img" alt=""/>
</div>
<br/>
<br/>
Text: 
<input type="text" name="add-text-curve-field" id="add-text-curve-field" value="TEXT CURVE"/>
<br/>
<br/>
Radius: 
<input type="range" name="text-curve-radius-field" id="text-curve-radius-field"/><br/>
<br/>
Inverse: 
<input type="checkbox" name="text-curve-inverse-field" id="text-curve-inverse-field"/>
<br/>
<br/>
<div id="svg"></div>

CSS

.error {
    border: 1px solid #f00;
}

#text-curve-preview-container {
    min-height: 200px;
}

JavaScript

renderCircleText(true);

$('#add-text-curve-field').keyup(function() {
	var text = $.trim($(this).val());
	
	if(text != '' && text != null) {
		$('#add-text-curve-field').removeClass('error');
	}else {
		$('#add-text-curve-field').addClass('error');
	}
});

$('#text-curve-radius-field, #text-curve-inverse-field').change(function() {
	renderCircleText(false);
});

$('#add-text-curve-field').change(function() {
	renderCircleText(true);
});

function renderCircleText(isInit) {
	var text = $.trim($('#add-text-curve-field').val());
	var radius = ($('#text-curve-radius-field').val() == parseInt($('#text-curve-radius-field').attr('min'))) ? 0 : $('#text-curve-radius-field').val();
	var startAngle = 0;
	var align = 'center';
	var isInside = false;
	var isClockwise = ! Boolean($('#text-curve-inverse-field').prop('checked'));
	var fontName = 'Arial';
	var fontSize = '18pt';
	var fontColor = '#000000';
	var letterSpacing = 0;
	
	if(isInit) {
		radius = 0;
	}
	
	if(!isClockwise) {
        startAngle = 180;
    }
    
	if(text != '' && text != null) {
		var textCircle = circleText(text, radius, startAngle, align, isInside, isClockwise, fontName, fontSize, fontColor, letterSpacing);
		
		$('#text-curve-preview-img').attr('src', textCircle.image);
        
		if(isInit) {
			$('#text-curve-radius-field').attr('min', Math.round(textCircle.radius));
			$('#text-curve-radius-field').attr('max', Math.round(2 * textCircle.radius));
			$('#text-curve-radius-field').val(Math.round(textCircle.radius));
		}
	}else {
		$('#add-text-curve-field').addClass('error');
	}
}

function circleText(text, radius, startAngle, align, isInside, isClockwise, fontName, fontSize, fontColor, letterSpacing) {             
    var c = document.createElement('canvas');
    var ctx = c.getContext('2d');
	
	var diameter = 0;
	align = align.toLowerCase();
    var clockwise = (align == 'right') ? 1 : -1;
    startAngle = startAngle * (Math.PI / 180);

    var iFrame = document.createElement('iframe');
   ...