JSFiddle - React, Tailwind, and code Playground

by diessses

HTML

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="GENERATOR" content="notepad 6.0 for Windows">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <link rel="shortcut icon" href="favicon.ico">
 <style type="text/css">
   body    {background-color: #ffffdd; color: #008833; font-size: 15px; line-height: 1.2}
   h2      {color: #990000}
   h3      {color: #990000}
   table   {background-color: #ffffff; color: #0000ff; font-size: 12px}
   .tabh   {background-color: #ffcccc}
   #id0    {color: #990000}
   #idc    {color: #808080; font-size: 12px}
   #idd    {color: #808080;}
   #id1    {color: #00ff00;}
   #idm    {color: #ff0000;}
 </style>

 <script type="text/javascript" src="polAp.js"></script>

 <title>Polygon calculation </title>
</head>

<body onLoad="init(0)">
<h2></h2>
<blockquote>
Polygon calculation

<form name="form1">
<input type="button" value="calc" onClick="clearD(-1)">　
<input type="button" value="del all point" onClick="clearD(0)">
<input type="button" value="undo" onClick="clearD(1)">
<input type="button" value="add point" onClick="clearD(2)">
<input type="button" value="del point" onClick="clearD(3)" style="display:none">
<input type="button" value="move point" onClick="clearD(4)" style="display:none"><br>

<input type="checkbox" name="chkG">Grid ON
<input type="checkbox" name="chkP" onClick="disp()" checked>View point Number
<input type="checkbox" name="chkF" onClick="disp()" checked>Paint inside
<hr size="3">
<table>
<tr>
  <td>
  <canvas width="500" height="500" id="canvas" style="border: 1px solid green;"></canvas>
  </td>
  <td>INFO<input type="button" value="(x, y) data input" onClick="inputXY()" style="display:none">
                        <input type="text" size="4" name="tdx"...

JavaScript

//-------------------------------------
// polA: area of Polygon
//-------------------------------------
  var df1;
  var pi = Math.PI;
  var param0 = 0;
  var NMAX = 500;                // max.# of data
  var xx = new Array(NMAX);      // x
  var yy = new Array(NMAX);      // y

  var n = 0;
  var iend = 0;
  var imin = -1;
  var crad = 5;
  var mDel = 0;
  var mMov = 0;

  var mTri = 0;
  var nt = 0;
  var t3 = [-1, -1, -1];
  var t3a = new Array(NMAX+1);
      for(var i=0; i<NMAX+1; i++) t3a[i] = new Array(8); // p1,p2,p3,A,h,L12,L23,L31
      t3a[NMAX][3] = 0;
  var kind = 4;
  var xpos = 0, ypos = 0;
  var g, w, h, x0, y0, dx, dy, maxS=15;

//..........................
  function init(sw) {
//..........................
    param0 = sw;
    df1 = document.form1;
    df1.ta0.value = "";

    loadCanvas();
    disp();
  }

//..........................
  function loadCanvas() {
//..........................
    var canvas = document.getElementById("canvas");
    if(!canvas.getContext) {
      alert("not supported");
      return;
    }

    g = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;
    dx = w/10; dy = h/10;
    x0 = w/2; y0 = h/2; w1 = w - 2*dx; h1 = h - 2*dy;

    canvas.addEventListener("mousedown" , mousePressed);
    canvas.addEventListener("mousemove" , mouseMoved);
  }

//..........................
  function calc() {
//..........................
    var a = 0, a1, im1, ip1;

    df1.ta0.value = "..n ......x ......y ...........Sn\n";

    for(var i=0; i<n; i++) {
      im1 = i - 1; if(im1  < 0) im1 = n -1;
      ip1 = i + 1; if(ip1 == n) ip1 = 0;

      switch(kind) {
        case 1: a1 = xx[i]*yy[ip1] - xx[ip1]*yy[i]; break;
        case 2: a1 = (xx[i] - xx[ip1])*(yy[i] + yy[ip1]); break;
        case 3: a1 = xx[i]*(yy[ip1] - yy[im1]); break;
        case 4: a1 = (xx[ip1] - xx[im1])*yy[i]; break;
      }
      a += a1;
      df1.ta0.value += fmtI(i+1,3) + fmtF(xx[i],8,3) + fmtF(yy[i],8,3) + fmtF(a1,14,6) + "\n";
    }

    a...