JSFiddle - React, Tailwind, and code Playground

by chillichief

HTML

<canvas id='test' height='2000' width='2000' >
</canvas>

CSS

#test{
    border:1px solid black;
}

JavaScript

canvas = document.getElementById('test');
 		canvas.addEventListener('touchstart', handleStart);
		canvas.addEventListener('touchmove' , handleMove);
		ctx = canvas.getContext('2d');
				


		function handleStart(e){
            if(e.targetTouches[0].radiusX === 0){
                e.preventDefault();
                var x = e.targetTouches[0].pageX;
                var y = e.targetTouches[0].pageY;
                ctx.fillStyle = '#0000FF';
                ctx.fillRect(x, y, 2, 2);
                ctx.beginPath();
                ctx.moveTo(x,y);
            }
		}
				
		function handleMove(e){
            if(e.targetTouches[0].radiusX === 0){
                e.preventDefault();
                var x = e.targetTouches[0].pageX;
                var y = e.targetTouches[0].pageY;
                ctx.lineTo(x,y);
                ctx.strokeStyle='#0000FF';
                ctx.lineWidth=2;
                ctx.stroke();
            
            }
            else{
                ctx.endPath();
            }
        }