foolishway/handleWriting.html

## handleWriting.html
<html>
<head>
<title></title>
</head>

<body>

<div id="test1">
  <div id="text"></div>
<canvas id="mycanvas" width="900px" height="800px"></canvas>


<script type="text/javascript">
  var canvas = document.getElementById("mycanvas");
  canvas.addEventListener('pointerdown', drawBegin)
  canvas.addEventListener('pointerup', mouseUp)
  canvas.addEventListener('pointermove', getPoint)
  let points = [];
  let renderTimer;
  function mouseUp(event) {
    window.cancelAnimationFrame(renderTimer)
    points = []
  }
  function getPoint(event) {
    let p = {
      layerX: event.layerX,
      layerY: event.layerY
    }
    points.push(p)

    document.getElementById("text").textContent ="x: " + p.layerX + "; y" + p.layerY + "; points: " + points.length;

  }

  function drawBegin(event) {
    points = []
    drawer()
  }

  function drawing(event) {
    drawer(event)
  }
  function drawer() {
    renderTimer = requestAnimationFrame(drawer)
      var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#000"
      if (points.length > 1) {
        for (var i = 0; i < points.length; i += 2) {
          var start = points[0]
          var end = points[i]
          points = points.slice(i)
          ctx.moveTo(start.layerX, start.layerY)
          ctx.lineTo(end.layerX, end.layerY)
          ctx.stroke();
        }
      }
  }
</script>
</body>
</html>
	<html>
	<head>
	<title></title>
	</head>

	<body>

	<div id="test1">
	<div id="text"></div>
	<canvas id="mycanvas" width="900px" height="800px"></canvas>


	<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	canvas.addEventListener('pointerdown', drawBegin)
	canvas.addEventListener('pointerup', mouseUp)
	canvas.addEventListener('pointermove', getPoint)
	let points = [];
	let renderTimer;
	function mouseUp(event) {
	window.cancelAnimationFrame(renderTimer)
	points = []
	}
	function getPoint(event) {
	let p = {
	layerX: event.layerX,
	layerY: event.layerY
	}
	points.push(p)

	document.getElementById("text").textContent ="x: " + p.layerX + "; y" + p.layerY + "; points: " + points.length;

	}

	function drawBegin(event) {
	points = []
	drawer()
	}

	function drawing(event) {
	drawer(event)
	}
	function drawer() {
	renderTimer = requestAnimationFrame(drawer)
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "#000"
	if (points.length > 1) {
	for (var i = 0; i < points.length; i += 2) {
	var start = points[0]
	var end = points[i]
	points = points.slice(i)
	ctx.moveTo(start.layerX, start.layerY)
	ctx.lineTo(end.layerX, end.layerY)
	ctx.stroke();
	}
	}
	}
	</script>
	</body>
	</html>