JSFiddle - React, Tailwind, and code Playground

by mrienstra

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Canvas Cord</title>
</head>
<body>

    <canvas id="cord_canvas" width="250" height="300"></canvas>

    <h2></h2>

</body>
</html>

CSS

html { height: 100%; }
body {
  margin: 0; font-family: arial,verdana,helvetica;
  background: #383966; /* Old browsers */
  background: -moz-linear-gradient(top, #383966 0%, #5d5caa 33%, #020744 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#383966), color-stop(33%,#5d5caa), color-stop(100%,#020744)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #383966 0%,#5d5caa 33%,#020744 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #383966 0%,#5d5caa 33%,#020744 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #383966 0%,#5d5caa 33%,#020744 100%); /* IE10+ */
  background: linear-gradient(top, #383966 0%,#5d5caa 33%,#020744 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383966', endColorstr='#020744',GradientType=0 ); /* IE6-9 */
}

JavaScript

var drawShape = function () {
    // get the canvas element using the DOM
    var canvas = document.getElementById('cord_canvas');
    
    // Make sure we don't execute when canvas isn't supported
    if (canvas.getContext) {
        var drawCircle = function (x, y, fillStyle) {
            var radius = 5;
            ctx.strokeStyle = fillStyle; // "rgba(255,165,0,1)"
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.stroke();
        }
        
        var drawSocket = function (x, y) {
            var radius = 8;
            
            ctx.strokeStyle = "rgb(175,175,0)";
            ctx.beginPath();
            ctx.lineWidth = 7;
            ctx.moveTo(x, y);
            ctx.bezierCurveTo(x - 10, y, x - 50, y, x - 75, y - 10);
            ctx.stroke();
            
            ctx.fillStyle = "rgb(45,45,45)";
            ctx.fillRect(x - radius - 8, y - 5, radius + 3, 10);
            // return;
            
            ctx.beginPath();
            ctx.arc(x, y, radius, Math.PI / -2, Math.PI / 2, true);
            ctx.lineTo(x + radius, y + radius);
            ctx.lineTo(x + radius, y - radius);
            ctx.fill();
        }
        
        var drawProng = function (x1, y1, x2, y2) {
            ctx.lineCap = "round";
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            
            var radius = ctx.lineWidth / 4;
            ctx.clearRect(x1 - radius, y1 - radius, radius * 2, radius * 2);
        }
        
        var drawPlug = function (x, y) {
            var radius = 8;
            ctx.lineWidth = 3;
            ctx.strokeStyle = "rgb(135,135,135)";
            drawProng(x - (radius * 2), y - (radius / 2.5), x - radius, y - (radius / 2.5));
            ctx.lineWidth = 4;
            ctx.strokeStyle = "rgb(155,155,155)";
            drawProng(x - (radius * 2), y + (radius / 2.5), x - radius, y + (radius / 2.5));
           ...