JSFiddle - React, Tailwind, and code Playground

by muztv

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fpsmeter/0.3.1/fpsmeter.js"></script>
<div>
  <canvas id="wrapper" width="500" height="500">
  </canvas>
</div>

CSS

html, body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

JavaScript

var meter = new FPSMeter();

var canvas = document.getElementById('wrapper');
var c = canvas.getContext('2d');
//console.log(offset)
document.body.addEventListener('touchmove', function(e) {
	var x = e.touches[0].clientX - 100;
  var y = e.touches[0].clientY - 100;
   
  c.clearRect(0, 0, canvas.width, canvas.height);
  c.beginPath();
  c.arc(x, y, 100, 0, 2 * Math.PI, false);
  c.fillStyle = 'green';
  c.fill();
  
  meter.tick();
}, false);