JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<canvas style="border: 5px solid red">

</canvas>

CSS

* {
  box-sizing: border-box;
  touch-action: manipulation;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

JavaScript

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth - 10;
canvas.height = window.innerHeight - 10;
var ctx = canvas.getContext('2d');
document.addEventListener('touchstart', e => {
	console.log(e.touches[0].clientX);
  e.preventDefault();
}, true);
document.addEventListener('touchmove', e => {
	console.log(e.touches[0].clientX);
  e.preventDefault();
}, true);
document.addEventListener('touchend', e => {
	console.log(e.touches[0].clientX);
  e.preventDefault();
}, true);