JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.0/heatmap.min.js"></script>
<canvas id="myCanvas" width="200" height="100"></canvas>
<image id="MyPix" width="100px" src="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"></image>
<svg width="100%"  viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <clipPath id="myCircle">
      <circle id="Oval" cx="171" cy="31" r="30"/>
    </clipPath>
  </defs>

  <g id="i-define-a-black-ring-yellow" fill="#img10"  transform="translate(20.000000, 20.000000)">
    <g id="Group">
      <circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100"/>
      <image x="146" y="14" width="50" height="35" id="innerImage"
             xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"
             clip-path="url(#myCircle)" />
      <!--<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>-->
    </g>
  </g>

</svg>


<button onclick="cavasToImage()">cavasToImage</button>  
<button onclick="resetImage()">resetImage</button> 
<button onclick="heatmapToImage()">heatmapToImage</button>
<div id="testcanvas"></div>

CSS

#myCanvas{
  position:absolute;
  left:0px;
  right:0px;
}

#testcanvas {
  width: 200px;
  height: 200px;
}

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);


function cavasToImage()
{
  var canvas1 = document.getElementById("myCanvas");        

     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      

  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage; 
  var im = document.getElementById('innerImage');
  var href = "data:image/png;base64,"+myImage;
  console.log("href",href);
	im.setAttribute('xlink:href', myImage);

}  

function heatmapToImage(){
  var canvas1 = document.getElementsByTagName("canvas")[1]; 
  var ctx = canvas1.getContext("2d");              
  ctx.font = "30px Arial";
		ctx.fillText("#########", 10, 50);
	ctx.fillText("#########", 10, 100);
	ctx.fillText("#########", 10, 150);  
  var myImage = canvas1.toDataURL("image/png");      
  var im = document.getElementById('innerImage');
	im.setAttribute('xlink:href', myImage);
} 

function resetImage(){
  var im = document.getElementById('innerImage');
  im.setAttribute('xlink:href',"https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg");
}

function createHeatMap(){
  var heatmapData = [
  {"uid":"6","x":42.62,"y":33.43,"verbatim":"dgfdgf","value":1},
  {"uid":"12","x":55.91,"y":34.54,"verbatim":"dfggf","value":1},
  {"uid":"17","x":10.5,"y":44.5,"verbatim":"dfgg","value":1},
  {"uid":"39","x":34.87,"y":29.01,"verbatim":"asdsadad","value":1}
  ]
  var heatmap = h337.create({
    container: document.getElementById('testcanvas')
  });
  heatmap.setData({ max: 5, data: heatmapData });

  heatmap.repaint();
}
createHeatMap();