JSFiddle - React, Tailwind, and code Playground

by DupontTD

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h3>cliquez pour  voir la position</h1>
  <div id="pos"> cliquer pour avoir la position
 </div>
  <canvas id="canvas"></canvas>
  
</body>
</html>

CSS

body {
  padding:0;
  margin:0;
}

div{
  opacity : 0;
  position :  absolute;
  background : black;
  color : white;
  padding :5px;
  
  -webkit-transition-property: opacity;
				-webkit-transition-duration: 2s;

}




h3 {
 opacity: 0;
  position : absolute;
  left : 100px;
  background : black;
  color : white;
  
  -webkit-animation: z 5s linear 1s;
  
}
@-webkit-keyframes z{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
	
}

JavaScript

canvas= document.getElementById('canvas');
 context = canvas.getContext('2d');

canvas.height= window.innerHeight;
canvas.width = window.innerWidth;

//your code here
//**************************
context.strokeRect(90,80,40,30);

//**************************

var table = (function(){  
function createLineV() { 
  context.beginPath();          
  context.moveTo(0, 0);
  context.lineTo(0, DIM);  
}
  
function duplicateLineV() {       
  for(i=0;i<=DIM;i=i+10){
     context.save();         
     if(i%100===0){
       context.fillText(i,0,i-2);
         context.lineWidth=1.5;
     }     
    context.translate(i,0);
    createLineV();
    context.stroke();
    context.restore();
  }     
}
  
  function createLineH() { 
  context.beginPath();          
  context.moveTo(0, 0);
  context.lineTo(DIM,0);  
}


function duplicateLineH() {       
  for(i=0;i<=DIM;i=i+10){
     context.save();         
     if(i%100===0){
       context.fillText(i,i+2,10);
         context.lineWidth=1;
     }     
    context.translate(0,i);
    createLineH();
    context.stroke();
    context.restore();
  }     
}
/*
function duplicateLineV() { 
    context.save();
    context.rotate(90*TO_RADIANS);
    context.translate(0,DIM);
    duplicateLineH();  
   context.restore();
}
*/


function drawTable() {
  context.strokeStyle = 'rgba(255,0,0,0.9)';
 context.lineWidth=0.1; 
  duplicateLineH();     
  duplicateLineV();
        
}
  
  HEIGHT = canvas.height;
  WIDTH = canvas.width ;
  TO_RADIANS = Math.PI / 180;        
  DIM = Math.max(HEIGHT,WIDTH);
  
  drawTable();  
  
  document.body.onclick = function(e) {
    e = e || window.event;

    var pageX = e.pageX;
    var pageY = e.pageY;
    if (pageX === undefined) {
        pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    console.log([pageX, pageY]);
    d = document.getElementById("pos");

    d.style.top...