JSFiddle - React, Tailwind, and code Playground

HTML

Input: <input id="in" size="80"></br>
Scaling: <input id="scale" size="4" value="1">
Position: <input id="position" size="1" value="2">
FixedWidth: <input id="mode" size="1" value="1">
IgnoreSpace: <input id="space" size="1" value="0">
ToUpper: <input id="Up" size="1" value="0">
<!--        
<button type="button" id="getData" onclick="copyText(path.innerHTML)">Get Data!</button>
-->
<div id="out"></div>
<canvas id="myCanvas" width="500" height="6000"></canvas>

<!-- <div id="path"><pre id="data"></pre></div> -->

CSS

#in, #out, #path {
    padding: 5px;
    margin: 5px;
}
#out {
    width: 500px;
    overflow: Hidden;
}


#path {visibility: hidden;}

JavaScript

function copyText(text) {
    alert(text);
    Copied = text.createTextRange();
    Copied.execCommand("Copy");
}

function paintDot(context, x, y, r, scale) {
    
    x = x * scale;
    y = y * scale;
    r = r * scale;
    
    //console.log('ip::x:'+x+' y:'+y+' r:'+r);
    
 //   if (pos == 2) {
 //       x = x - 9 + r;
 //       y = y - 9 + r;
 //   }
            
    context.beginPath();
    context.arc(x, y, r, 0, 2 * Math.PI, false);
    //context.rect(2*x,2*y,r*2,r*2);
    //context.stroke(); 
    context.fillStyle = 'black';
    context.fill();
}

function drawDiamond(context, x, y, width, height){
  context.save();
  context.beginPath();
  context.moveTo(x, y);

  // top left edge
  context.lineTo(x - width / 2, y + height / 2);

  // bottom left edge
  context.lineTo(x, y + height);

  // bottom right edge
  context.lineTo(x + width / 2, y + height / 2);

  // closing the path automatically creates
  // the top right edge
  context.closePath();

  context.fillStyle = "red";
  context.fill();
  context.restore();
}

function flowPath(x, y, r, scale, position, mode) {
    var code = "";
    var lineending = '\n';

    // fixup start while scaling
    x = x * scale;
    y = y * scale;
    r = r * scale;
    
    // reposition depending on position type
    // 1: centered, do nothing
    // 2: left top - recalculate x + y
    if (position == 2) {
        x = x - 9 * scale + r;
        y = y - 9 * scale + r;
    }
    
    // object type
    code += ' 0' + lineending;
    code += 'CIRCLE' + lineending;
    
    // layername
    code += ' 8' + lineending;
    code += '1' + lineending;
    
    // linetye
    code += ' 6' + lineending;
    code += 'CONTINUOUS' + lineending;

    // x coord
    code += ' 10' + lineending;
    code += x + '.0000' + lineending;
    // y coord
    code += ' 20' + lineending;
    code += y + '.0000' + lineending;
    // z coord
    code += ' 30' + lineending;
    code += '0' + '.0000' + lineending;
    
    // radius
    code +=...