<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ASR tangibles</title>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #EEEEEE;
}
canvas {
border: gray;
}
</style>
</head>
<body>
<!--<div id="box"></div>-->
<canvas id="myCanvas" width="1000" height="800"></canvas>
<script>
var canvasElement = document.querySelector("#myCanvas");
canvasElement.addEventListener('touchstart', (evt) => {
return eventHandler(evt, 'touchstart');
});
canvasElement.addEventListener('touchmove', (evt) => {
return eventHandler(evt, 'touchmove');
});
canvasElement.addEventListener('touchend', (evt) => {
return eventHandler(evt, 'touchend');
});
var context = canvasElement.getContext("2d");
context.font = '48px serif';
function distance(touches, id1, id2){
return Math.sqrt( (touches[id1].pageX-touches[id2].pageX)**2 + (touches[id1].pageY-touches[id2].pageY)**2 );
}
function angle(touches, id){
var AB = distance(touches, id, (id+1)%3);
var BC = distance(touches, (id+1)%3, (id+2)%3);
var AC = distance(touches, (id+2)%3, id);
return Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB))*180/Math.PI;
}
const eventHandler = (evt, type) => {
console.log("test");
if(evt.touches.length === 3){
console.log(evt.touches);
context.clearRect(0, 0, canvasElement.width, canvasElement.height);
// the triangle
context.beginPath();
context.moveTo(evt.touches[0].pageX, evt.touches[0].pageY);
context.fillText(distance(evt.touches, 0, 1), 10, 50);
context.fillText(angle(evt.touches, 0), 10, 100);
context.lineTo(evt.touches[1].pageX, evt.touches[1].pageY);
context.fillText(distance(evt.touches, 1, 2), 10, 150);
context.fillText(angle(evt.touches, 1), 10, 200);
context.lineTo(evt.touches[2].pageX, evt.touches[2].pageY);
context.fillText(distance(evt.touches, 2, 0), 10, 250);
context.fillText(angle(evt.touches, 2), 10, 300);
context.closePath();
// the outline
context.lineWidth = 1;
context.strokeStyle = '#666666';
context.stroke();
// the fill color
context.fillStyle = "#FFCC00";
context.fill();
}
evt.preventDefault();
};
</script>
</body>
</html>