JSFiddle - React, Tailwind, and code Playground

by michael_chnc

HTML

<canvas style="position:fixed;top:0;left:0;border:1px;" width="500" height="500" id="canvas">

JavaScript

/*Basic Circuit symbol toolset, still alot missing
credit to: https://stackoverflow.com/users/434421/mindoftea*/

class Circuit {
  constructor(name="canvas", ix=50, iy=50) {
    this.canvas = document.getElementById(name);
    this.ctx = canvas.getContext("2d");
    this.d = 0;
    this.ix = ix;
    this.iy = iy;
    this.cx = ix;
    this.cy = iy;
    this.dx = 1;
    this.dy = 0;
    this.px = 0;
    this.py = 0;
    this.pd = 0;
    this.pdx = 0;
    this.pdy = 0;
    this.ctx.beginPath();
    this.ctx.moveTo(this.cx, this.cy);
  }
  start(ix=10, iy=10) {
    this.d = 0;
    this.ix = ix;
    this.iy = iy;
    this.cx = ix;
    this.cy = iy;
    this.dx = 1;
    this.dy = 0;
    this.px = 0;
    this.py = 0;
    this.pd = 0;
    this.pdx = 0;
    this.pdy = 0;
    this.ctx.beginPath();
    this.ctx.moveTo(this.cx, this.cy);
  }
  
  finish(close=true) {
    if (close) {
      this.ctx.lineTo(this.ix, this.iy);
    }
    this.ctx.stroke();
  }
  
  save() {
    this.px = this.cx;
    this.py = this.cy;
    this.pd = this.d;
    this.pdx = this.dx;
    this.pdy = this.dy;
  }
  
  restore() {
    this.cx = this.px;
    this.cy = this.py;
    this.d = this.pd;
    this.dx = this.pdx;
    this.dy = this.pdy;
    this.ctx.moveTo(this.cx, this.cy);
  }
  
  newelement(len=50) {
    this.ctx.save();
    this.ctx.translate(this.cx, this.cy);
    this.ctx.rotate(this.d*Math.PI/2);
    if (this.dx < -0.5 ) {
      this.ctx.rotate(Math.PI);
      this.ctx.translate(-len, 0);
    }
    this.ctx.moveTo(0,0);
  }
  
  endelement(len=50) {
    this.ctx.restore();
    this.cx += this.dx * len;
    this.cy += this.dy * len;
    this.ctx.moveTo(this.cx,this.cy);
  }
  
  wire(len=50) {
    this.newelement(len);
 		this.ctx.lineTo(len,0);
    this.endelement(len);
  }
  
  drawWire(len=50) {
    this.cx += this.dx * len;
    this.cy += this.dy * len;
    this.ctx.lineTo(this.cx, this.cy);
  }
  
  power(len=50, n=2, label="") {
    var space = 5;
    var wl = (len -...