JSFiddle - React, Tailwind, and code Playground

by nateomardavis

HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript" src="https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js"></script>
   <style>
   
   html, body {
     width:  100%;
     height: 100%;
  }
    
  html { 
    color: #333;
    font-family: sans-serif;
    font-size: 16pt;
    font-weight: 100;
    line-height: 1.5em;
  }
  
  .wrapper { 
    width: 100%; 
    height:100%; 
    background:rgba(0,0,0,.03); 
    border:3px solid black; 
  }
  
  .heatmap { 
    width:100%; 
    height:100%;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    border:3px solid blue; 
 }
 
 .canvas {
   border:3px solid red; 
 }

  </style>
  
  </head>
  
 <body>
   <button class="clear">Clear</button>
   <button onclick="printPage()" class="print-btn no-print" style="">Print</button>
   <p id="coords"></p>
    <div id="wrapper" class="wrapper"> <!-- black box on web app-->
      <div id="heatmap" class = "heatmap" style="position: relative;"> <!-- blue box on web app-->
      <canvas id="canvas" class="canvas"></canvas> <!-- red box on web app-->
    </div> 
  </div>


<script>
   
   
    
//CREATE HEATMAP
  window.onload = function() {
    var heatmapInstance = h337.create({
      container: document.querySelector('.heatmap'),
      gradient: {
        '.25': 'black',
        '.5': 'red',
        '.75': 'white'
      },
      radius: 20
    });

    document.querySelector('.wrapper').onclick = function(ev) {
      heatmapInstance.addData({
        x: ev.layerX,
        y: ev.layerY,
        value: 1
      });
    };
      
     document.querySelector('.clear').onclick = function() {
       //heatmapInstance._renderer._clear();
       heatmapInstance.setData({data:[]}); 
      };

//RESIVE CANVAS TO FIT IMAGE
  //http://jsfiddle.net/6ZsCz/1135/
  var canvas = document.getElementById('canvas');  //v1
  //var canvas = document.getElementById('heatmap');...