JSFiddle - React, Tailwind, and code Playground

HTML

<canvas style="position:fixed;top:0;left:0" width="500" height="500" id="canvas">
<script>
beginCircuit(200,100);
endCircuit();
</script>

JavaScript

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */


"use strict"

var wW = window.innerWidth;
var wH = window.innerHeight;
var canvasHTML = document.getElementById("canvas");
canvasHTML.width = wW;
canvasHTML.height = wH;
var ctx = canvasHTML.getContext("2d");
var ix;
var iy;
var x;
var y;
var d;
var dx;
var dy;

function beginCircuit(a, b) {
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = "#000";
    ctx.beginPath();
    x = a;
    y = b;
    d = 0;
    dx = 1;
    dy = 0;
    ix = x;
    iy = y;
    ctx.moveTo(x, y);
    drawWire(50);
    drawPower();
}

function endCircuit() {
    ctx.lineTo(ix, iy);
    ctx.stroke();
}

function drawWire(l) {
    x += dx * l;
    y += dy * l;
    ctx.lineTo(x, y);
}

function drawPower() {
    var n;
    drawWire(10);
    n = 3;
    ctx.moveTo(x + 10 * dy, y + 10 * dx);
    ctx.lineTo(x - 10 * dy, y - 10 * dx);
    x += dx * 5;
    y += dy * 5;
    while (n--) {
        ctx.moveTo(x + 15 * dy, y + 15 * dx);
        ctx.lineTo(x - 15 * dy, y - 15 * dx);
        x += dx * 5;
        y += dy * 5;
        ctx.moveTo(x + 10 * dy, y + 10 * dx);
        ctx.lineTo(x - 10 * dy, y - 10 * dx);
        if (n != 0) {
            x += dx * 5;
            y += dy * 5;
        }
    }
    ctx.moveTo(x, y);
    drawWire(10);
}

function drawCapacitor() {
    drawWire(22.5);
    ctx.moveTo(x + 10 * dy, y + 10 * dx);
    ctx.lineTo(x - 10 * dy, y - 10 * dx);
    x += dx * 5;
    y += dy * 5;
    ctx.moveTo(x + 10 * dy, y + 10 * dx);
    ctx.lineTo(x - 10 * dy, y - 10 * dx);
    ctx.moveTo(x, y);
    drawWire(22.5);
}

function drawInductor() {
    var n, xs, ys;
    drawWire(9);
    n = 4;
    xs = 1 + Math.abs(dy);
    ys = 1 + Math.abs(dx);
    x += dx * 6;
    y += dy * 6;
    ctx.scale(xs, ys);
    while (n--) {
        //ctx.moveTo(x/xs+5*Math.abs(dx),y/ys+5*dy);
        ctx.moveTo(x / xs...