JSFiddle - React, Tailwind, and code Playground

by Tron4949

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<link rel="stylesheet" type="text/css" href="/template/Styles/custom-hats.css">

<canvas id="c" width="740" height="500" style="border-left: 3px solid black; 
                              border-top: 3px solid black;
                              border-radius: 10px;"></canvas>

                              <button class="btn" id="customer-chosen-background-image">Set A Background Image</button>
                              <input class="btn" type="file" id="files" name="files[]"/>
                              <button class="btn" id="sessionInfoClear">Clear My Session</button>

                              <hr>
                              <button class="btn view-btn" id="front-hat-view-button">Front</button>
                              <button class="btn view-btn" id="side-hat-view-button">Side</button>
                              <button class="btn view-btn" id="back-hat-view-button">Back</button>

<canvas id="d" width="740" height="250" style="border-left: 3px solid black; 
                              border-top: 3px solid black;
                              border-radius: 10px;"></canvas>

JavaScript

$(document).ready(function() {

  var canvas = new fabric.Canvas('c');
  var canvas2 = new fabric.Canvas('d');
  var scopeTesterOne = "testing scope";//SOMETHING I DO OCCASIONALLY

  document.getElementById('files').addEventListener("change", function (e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function (f) {
      var data = f.target.result;                    
      fabric.Image.fromURL(data, function (img) {
        var oImg = img.set({left: 350, top: 300, angle: 00,width:100, height:100}).scale(0.9);
        canvas.add(oImg).renderAll();
        var a = canvas.setActiveObject(oImg);
      });
    };
    reader.readAsDataURL(file);
    $('#files').css({'background-color': 'white', 'color': 'black', 'border': '2px solid black'});

  });
  
$('#customer-chosen-background-image').click(function() {
   var backgroundImageFilePath = 'http://store-1p9yfoynqe.mybigcommerce.com/product_images/Viewsforfiddle.png';
      // var backgroundURL = "url(" + backgroundImageFilePath + ")"
      canvas.setBackgroundImage(backgroundImageFilePath, canvas.renderAll.bind(canvas), {
        top: 0,
        left: 50,
        scaleY: .8,
        scaleX: .8
      });  
  });
  
var whatIsTheHatViewOnCanvas = function() {//INITIALLY THIS IS HOW WE TELL/TRACK/SET WHAT THE PREVIOUS VIEW WAS
    var doesTrackingDataExist = sessionStorage.getItem('viewForHatCanvas');
    if (doesTrackingDataExist) {
      console.log("traker has previous view data");
    } else {
      console.log("traker has no previous view data");
      sessionStorage.setItem('viewForHatCanvas', "front");

      var consoleTestttt = sessionStorage.getItem('viewForHatCanvas');
      console.log(consoleTestttt);
    }
  };
  whatIsTheHatViewOnCanvas();

  function loadCanvas(dataURL) { //THIS IS FOR THE MAIN CANVAS
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');
    
    var imageObj = new Image();
    imageObj.onload = function()...