JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id="scr" width=1000px height=1000px></canvas>

CSS

body {
  background-color:#000000;
  text-align:center;
}
canvas {

}

JavaScript

// kicad 
let scr = document.getElementById('scr');
let ctx = scr.getContext('2d');
let lib = `
EESchema-LIBRARY Version 2.3
#encoding utf-8
#
# GAL16V8
#
DEF GAL16V8 U 0 40 Y Y 1 F N
F0 "U" -350 650 50 H V L CNN
F1 "GAL16V8" 50 650 50 H V L CNN
F2 "" 0 0 50 H I C CNN
F3 "" 0 0 50 H I C CNN
$FPLIST
 DIP*
 PDIP*
 SOIC*
 SO*
 PLCC*
$ENDFPLIST
DRAW
X GND 10 0 -600 0 U 50 50 0 0 W N
X VCC 20 0 600 0 D 50 50 0 0 W N
X I1/CLK 1 -500 500 150 R 50 50 1 1 I
X I2 2 -500 400 150 R 50 50 1 1 I
X I3 3 -500 300 150 R 50 50 1 1 I
X I4 4 -500 200 150 R 50 50 1 1 I
X I5 5 -500 100 150 R 50 50 1 1 I
X I6 6 -500 0 150 R 50 50 1 1 I
X I7 7 -500 -100 150 R 50 50 1 1 I
X I8 8 -500 -200 150 R 50 50 1 1 I
X I9 9 -500 -300 150 R 50 50 1 1 I
X I10/~OE~ 11 -500 -400 150 R 50 50 1 1 I
X IO8 12 500 -200 150 L 50 50 1 1 T
X IO7 13 500 -100 150 L 50 50 1 1 T
X IO6 14 500 0 150 L 50 50 1 1 T
X IO5 15 500 100 150 L 50 50 1 1 T
X IO4 16 500 200 150 L 50 50 1 1 T
X I03 17 500 300 150 L 50 50 1 1 T
X IO2 18 500 400 150 L 50 50 1 1 T
X IO1 19 500 500 150 L 50 50 1 1 T
S -350 600 350 -600 0 1 10 f
ENDDRAW
ENDDEF
`;
//



let list = lib.split("\n");
let scale = 2;

function draw() 
{
	ctx.fillStyle = '#dddddd';
	ctx.fillRect(0,0,scr.width,scr.height);

  // crosshair
  ctx.strokeStyle = '#0000aa';
  ctx.fillStyle = '#aaaaaa';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0,scr.height/2);
  ctx.lineTo(scr.width,scr.height/2);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(scr.width/2,0);
  ctx.lineTo(scr.width/2,scr.height);
  ctx.stroke();
    //flip y axis -- doesnt work when applying text
  ctx.transform(1, 0, 0, -1, 0, scr.height)
  ctx.translate(scr.width/2, scr.height/2);

  
  var index = 0;
  for(index=0;index<list.length;index++) {
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'white';
    let item = list[index].split(" ");
    let mode = item[0];
    switch (mode) {
    	case "DEF":
      	//DEF name ref 0 offs Y Y 1 F N
      	//DEF PCA9536D U 0 40 Y Y 1 F N
        var name =...