JSFiddle - React, Tailwind, and code Playground

HTML

<canvas class="canvas" width="300" height="300"></canvas>
<canvas class="canvas" width="300" height="300"></canvas>
<canvas class="canvas" width="300" height="300"></canvas>

CSS

.canvas {
  width: 300;
  height: 300;
  border: 1px solid;
}

JavaScript

var ProductDesigner = (function () {
	var data = {
    activePage: null,
    nextDisable: false,
    diameter: 250,
    slant: 20,
    height: 290,
    price: 0
  };
  var Cart = {
    p_id: null,
    v_id: null,
    hang: true,
    Size: {
      diameterTop: null || "0",
      diameterBot: null || "0",
      height: null || "0"
    },
    Color: {
      cord: null,
      topTrim: null,
      outerShade: null,
      innerShade: null,
      botTrim: null
    }
  };
  
  var _showShade = function () {
    var c = document.getElementsByClassName("canvas");

      for (i = 0; i < c.length; i++) {
        var canvas = c[i];
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0,0, canvas.width, canvas.height);
        ctx.lineWidth=0.5;
		ctx.strokeStyle = "hsl(0,0%,0%)";
		ctx.setTransform(1,0,0,1,0.5,0.5)
      }

      if (Cart.hang) {
        if (Cart.Color.cord) {
          var cord = new Image();
          cord.onload = function() {
            for (var i = 0; i < c.length; i++) {
              var canvas = c[i];
              var ctx = canvas.getContext("2d");
              var pattern = ctx.createPattern(cord, "repeat");
              ctx.beginPath();
              ctx.rect(150, 0, 3, 75);
              ctx.fillStyle = pattern;
              ctx.fill();
              ctx.stroke();
              ctx.closePath();
            }
          }
          cord.src = "/wp-content/plugins/productdesigner/assets/Cords/" + Cart.Color.cord + ".jpg";
        } else {
          for (var i = 0; i < c.length; i++) {
            var canvas = c[i];
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.rect(150, 0, 3, 75);
            ctx.stroke();
            ctx.closePath();
          }
        }
      }

      if (Cart.Color.topTrim) {
        var toptrim = new Image();
        toptrim.onload = function() {
          for (i = 0; i < c.length; i++) {
            var canvas = c[i];
            var ctx = canvas.getContext("2d");
  ...