JSFiddle - React, Tailwind, and code Playground

HTML

<div>
fingerprinting test
</div>
<div>
<div id='canvas'></div>
<div id='gl'></div>
<div id='webrtc'></div>
</div>

JavaScript

// Webrtc
 // WebRTC from https://github.com/diafygi/webrtc-ips
  var RTCPeerConnection = window.webkitRTCPeerConnection;
  //minimal requirements for data connection
  var mediaConstraints = {
      optional: [{RtpDataChannels: true}]
  };
  var servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};
  //construct a new RTCPeerConnection
  var pc = new RTCPeerConnection(servers, mediaConstraints);
  //listen for candidate events
  pc.onicecandidate = function(ice){
      //skip non-candidate events
      if(ice.candidate)
          console.log(ice.candidate.candidate);
  };
  //create a bogus data channel
  pc.createDataChannel("");
  //create an offer sdp
  pc.createOffer(function(result){
      //trigger the stun server request
      pc.setLocalDescription(result, function(){}, function(){});
      document.getElementById('webrtc').innerText = 'got webrtc fingerprint'
  }, function(){});
  
  // Canvas
      var canvas = document.createElement("canvas");
      canvas.width = 2000;
      canvas.height = 200;
      canvas.style.display = "inline";
      var ctx = canvas.getContext("2d");
      ctx.rect(0, 0, 10, 10);
      ctx.rect(2, 2, 6, 6);
      document.getElementById('canvas').innerText = canvas.toDataURL() ? 'got canvas fingerprint ' + canvas.toDataURL() : ''
// WebGL
canvas = document.createElement("canvas");
var gl = canvas.getContext("webgl")
gl.clearColor(0.0, 0.0, 0.0, 1.0);
if (gl.getSupportedExtensions()) {
  document.getElementById('gl').innerText = 'got webgl fingerprint ' + gl.getSupportedExtensions().join(";") + gl.getParameter(gl.ALPHA_BITS);
}