JSFiddle - React, Tailwind, and code Playground

by Udhay

HTML

<!DOCTYPE HTML> <html> 
<head>
 <script>
window.onload = function()<!--   w w  w  . j  a va2s  .  co m-->
{ 
  var canvasLists = [
    {id: "canvasArea", strokeColor: "yellow", strokeWidth: 2, bg: "#FFCC00"}, 
    {id: "canvasArea1", strokeColor: "blue", strokeWidth: 8, bg: "#FF0000"}
  ];
  canvasLists.forEach(function(element){
			 canvas  = document.getElementById(element.id); 
       context = canvas.getContext("2d");
       var sColor = "red";
       var sWidth = 8;
       var bg = "blue";
       if(element.strokeColor) {
       		sColor = element.strokeColor;
       }
       if(element.strokeWidth) {
       		sWidth = element.strokeWidth;
       }
       if(element.bg) {
       		bg = element.bg;
       }

       //canvas1  = document.getElementById("canvasArea1"); 
       //context1 = canvas1.getContext("2d");

       // A2. ARCS.
       //      x    y   rad sAng eAng antiC  line    fill
       //      ---- --- --- ---- ---- -----  ------  -------
       //drawArc(60,  15, 40, 0,   180, false, "aqua", "yellow");
       drawArc(100, 70, 60, -20, 200, true,  "red","white");

       drawArc(100, 75, 60, 20, 160, false,  "green","white");
       drawArc(100, 72, 50, 360, 0, true,  "white", bg);
       //drawArc(250, 15, 50, 350, 170, false, "red",  "pink" );
       //drawArc(360, 60, 50, 350, 20,  true,  "blue", "purple");

       // B. DRAW arc function.
       function drawArc(xPos, yPos, 
                        radius, 
                        startAngle, endAngle,
                        anticlockwise, 
                        lineColor, fillColor)
       {
          // B1. ANGLES in radians.
          var startAngle = startAngle * (Math.PI/180);
          var endAngle   = endAngle   * (Math.PI/180);

          // B2. RADIUS.
          var radius = radius;

          // B3. ATTRIBUTES.
          context.strokeStyle = lineColor;
          context.fillStyle   = fillColor;
          if(element.strokeWidth) {
          	context.lineWidth   = ...