JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/barcodes/JsBarcode.code128.min.js"></script>
<canvas id="can" width="600" height="800"></canvas>
<svg id="barcode"></svg>

CSS

#can{
  border: 1px solid black;
}

JavaScript

var ctx = can.getContext("2d");

 var e = "INGENIERIA EN SISTEMAS COMPUTACIONALES	18540342	DE LA ROCHA CARAVEO FIDEL 	3	 80 70	NO REGULAR";
 let data = e.replace(/(in\D+)\s+(\d+|.\d+)\s+(\D+)\s+(\d+)\s+(?:(\d+\S\d+|\d+)|(\d+.\d+|\d+)\s+(\d+.\d+|\d+))\s+(\D+ar)/gi, "$1-$2-$3-$4-$5-$6-$7-$8").split("-");
 var reg = /([^0-9\s]+\s+[^0-9\s]+)\s+([^0-9\s]+\s+[^0-9\s]+|\D+)|(\D+)\s+(\D+)/gi;
 var regn = /([^0-9\s]+\s+[^0-9\s]+\s+[^0-9\s]+\s+|[^0-9\s]+\s+[^0-9\s]+\s+[^0-9\s]+\s+[^0-9\s]+|[^0-9\s]+\s+[^0-9\s]+)\s+([^0-9\s]+\s+[^0-9\s]+|\D+)/gi;
 var regp = /(?:(\d+)(.\d+)|(\d+)())/gi;
 
 var code = new Image();
 
 JsBarcode(code, data[1], {
  width: 6,
  height: 60
});
 
 console.log(data);

 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, 600, 715);

 var grdg = ctx.createLinearGradient(500, 500, 0, 0);
 grdg.addColorStop(1, "#FFFB7D");
 grdg.addColorStop(0, "#85FFBD");

 var grdr = ctx.createLinearGradient(500, 500, 0, 0);
 grdr.addColorStop(1, "#FBAB7E");
 grdr.addColorStop(0, "#F7CE68");

 data[4] = (data[4]) ? '' + parseFloat(data[4]).toFixed(2) : '' + ((parseFloat(data[5]) + parseFloat(data[6])) / 2).toFixed(2);

 ctx.fillStyle = (parseInt(data[4]) >= 70) ? grdg : grdr;
 ctx.fillRect(0, 0, 600, 300);

 ctx.fillStyle = "white";
 ctx.beginPath();
 ctx.moveTo(0, 300);
 ctx.bezierCurveTo(100, 300, 180, 200, 300, 200);
 ctx.bezierCurveTo(420, 200, 500, 300, 600, 300);
 ctx.fill()
 ctx.fillRect(0, 300, 600, 300);

 ctx.fillStyle = "black";

 ctx.textAlign = "center";

 ctx.font = '55px "Arial"';
 ctx.fillText(data[2].replace(regn, "$2"), 300, 100);

 ctx.font = '45px "Arial"';
 ctx.fillText(data[2].replace(regn, "$1"), 300, 150);

 ctx.font = '150px "Arial R"';
 ctx.fillText(data[4].replace(regp, "$1$3"), 300, 330);

 ctx.font = '50px "Arial"';
 ctx.fillText( /*" ." +*/ data[4].replace(regp, "$2"), 410, 330);

 ctx.font = '70px "Arial"';

 let s;
 if (data[6]) {
   if (parseFloat(data[4]) > parseFloat(data[6])) {
     ctx.fillStyle = "#2ECC71";
     s = "▲";
   } else if...