JSFiddle - React, Tailwind, and code Playground

by RavilG

HTML

<!--========= TESTMODE ================= -->
<div id="testmode">Testmode <input type="checkbox" id="testmode-check" name="Testmode" > 
  <!--checked einfügen für TESTMODE  und löschen für kein Testmode-->
    <div id="Test-Spannungen">
                 <input class="voltage-arrow arrow-button testarrow"  value="U"   type="button" oldvalue="" name="#0B0BFD">
                 
                  <input class="voltage-arrow arrow-button testarrow"  value="U_R" type="button" oldvalue="" name="#00B050">
                  <input class="voltage-arrow arrow-button testarrow"  value="U_L" type="button" oldvalue="" name="#7030A0">
                  <input class="voltage-arrow arrow-button testarrow"  value="U_C" type="button" oldvalue="" name="#0B0BFD">
                  
    </div>
    <div id="Test-Ströme">
                 
                <input class="current-arrow arrow-button testarrow"  value="I" type="button"   oldvalue="" name="#FF0000">
                <input class="current-arrow arrow-button testarrow"  value="I_RL" type="button"oldvalue="" name="#F6630D">
                <input class="current-arrow arrow-button testarrow"  value="I_C" type="button" oldvalue="" name="#FFC000"> 
          
    </div>
    <div id="Genauigkeit">1  <!--Es ist nur 1, 5, 10 und 50 möglich -->
    
    </div>
    
</div>
<!--========= CODE ================= -->
<p>
</p>
<table frame="border" rules="all" dir="ltr" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04); margin-left: 10px; font-family:Verdana;font-size:16px" cellpadding="5" cellspacing="1" bordercolor="#E4E4E4" border="3">
    <thead>
        <tr style="text-align: center; border-bottom: 4px solid #E4E4E4;">
        <th > </th>
            <th>Spannungen</th>
            <th>Ströme</th>
            <th>Genauigkeit</th>
        </tr>
    </thead>
    <tbody id="tableBody">
        <tr>
            <td>Zeiger <input type="color" required="true" id="color"...

JavaScript

var canvas = document.getElementById("canvas"),
        tempcanvas = document.getElementById("tempcanvas"),
        ctx = tempcanvas.getContext('2d'),
        mainctx = canvas.getContext('2d'),
        w = canvas.width - 1, //damit die Mittellinie auch in der Mitte ist ist die breite 501
        h = canvas.height - 1,
        x1,
        y1,
        x2,
        y2,
        accuracy = document.getElementById("accuracy"),
        scaleGrid = 50,
        scaleU = scaleGrid / document.getElementById("scale-U").innerHTML,
        scaleI = scaleGrid / document.getElementById("scale-I").innerHTML,
        scale = {
            "voltage": scaleU,
            "current": scaleI
        },
        cail = scaleGrid / 10,
        curr_arrow = "dummy",
        //arrow=[x1,y1,x2,y2,color,name,kind]
        colorInput = document.getElementById("color"),
        arrows = [],
        lastsave = [], //JSON.parse(JSON.stringify(arrows)),
        scalesCheck = document.getElementById("scalesCheck"),
        scaleUInput = document.getElementById("scale-U"),
        scaleIInput = document.getElementById("scale-I"),
        istouch=false,
        touchCounter=0,
        isDown = false,
        mark = false;
		
        
   
		testMode();
		arrows = createArrows();
   
    colorInput.value = arrows[findCurrArrow()][4];
    //lastsave.push(JSON.parse(JSON.stringify(arrows)))
    ctx.translate(0.5, 0.5);
    ctx.font = "12px Verdana";
    drawGrid();
    mainctx.drawImage(tempcanvas, 0, 0);
     
    ctx.clearRect(0, 0, w, h);
    mainctx.save();
   

    setButtonStyle();
    //deletings();

    accuracy.oninput = function() {
        var values = [1, 5, 10, 50];

        document.getElementById("accuracyOutput").innerHTML = values[this.value];
        cail = scaleGrid / values[this.value];
    }
    scaleUInput.onblur = function() {
        this.style.width = ((this.innerHTML.length + 3) * 8) + 'px';
        scale.voltage = scaleGrid / this.innerHTML;
        drawAll();
    }
   ...