touch-screen-test.html

<style>
	body{
		margin: 0px;
	}
	canvas{
		width: 100vw;
		height: 100vh;
	}
</style>

<canvas />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" integrity="sha256-67By+NpOtm9ka1R6xpUefeGOY8kWWHHRAKlvaTJ7ONI=" crossorigin="anonymous"></script>
<script>
	$(function(){
		var paper = Raphael(0, 0, window.innerWidth, window.innerHeight);

		var drawDot = function(e){
			// console.log(e)
			var x = e.originalEvent.touches[0].pageX
			var y = e.originalEvent.touches[0].pageY

			// console.log('dot', x, y)

			var circle = paper.circle(x, y, 50, 50)
			circle.attr("fill", "#f00")
			circle.attr("stroke", "#f00")
		}

		var drawing = false

		var body = $('body')

		body.on('touchstart', function(event){

			drawDot(event)
			drawing = true
		})
  
		body.on('touchmove', function(event){
			console.log('move')
			if(drawing){
				drawDot(event)
			}
		})

		body.on('touchend', function(event){
			console.log('up')
			drawing = false
		})
	})
</script>