<!DOCTYPE html>
<html>
<head>
<title>Touch and Stylus Events</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
    margin: 0;
    padding: 0;
    background-color: #eee;
}

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

#touches {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

#touches div {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    will-change: transform;
    transform: translate(0, 0);
}

#touches div svg.touch {
    width: 200px;
    height: 200px;
}

#touches div svg.touch circle {
    cx: 100px;
    cy: 100px;
    fill: #cccf;
    stroke: #aaa;
    stroke-width: 1px;
}

#touches div.stylus svg.touch circle {
    fill: #fccf;
    stroke: #faa;
}

#touches div svg.touch line {
    stroke: #666;
    stroke-width: 4px;
    stroke-linecap: round;
}

#touches div svg.altitude {
    position: absolute;
    top: -100px;
    left: 50px;
    width: 100px;
    height: 100px;
}

#touches div svg.altitude line.x-axis {
    stroke: green;
    stroke-opacity: 0.6;
    stroke-width: 2px;
}

#touches div svg.altitude line.angle {
    stroke: #666;
    stroke-width: 2px;
}

</style>
<script>

const SVGNS = "http://www.w3.org/2000/svg";

var container;
var touchObjects = {};

class TouchObject {
    constructor(touch) {
        this.element = document.createElement("div");
        this._touchType = touch.touchType;
        this.root = document.createElementNS(SVGNS, "svg");
        this.root.setAttribute("class", "touch");
        this.touchCircle = document.createElementNS(SVGNS, "circle");
        this.root.appendChild(this.touchCircle);
        if (this._touchType == "stylus") {
            this.element.className = touch.touchType;
            this.line = document.createElementNS(SVGNS, "line");
            this.line.setAttribute("x1", 100);
            this.line.setAttribute("y1", 100);
            this._azimuthAngle = touch.azimuthAngle;
            this.root.appendChild(this.line);

            var altitudeDiagram = document.createElementNS(SVGNS, "svg");
            altitudeDiagram.setAttribute("class", "altitude");
            var screenAxis = document.createElementNS(SVGNS, "line");
            screenAxis.setAttribute("class", "x-axis");
            screenAxis.setAttribute("x1", 0);
            screenAxis.setAttribute("y1", 100);
            screenAxis.setAttribute("x2", 100);
            screenAxis.setAttribute("y2", 100);
            altitudeDiagram.appendChild(screenAxis);
            this.altitudeLine = document.createElementNS(SVGNS, "line");
            this.altitudeLine.setAttribute("class", "angle");
            this.altitudeLine.setAttribute("x1", 1);
            this.altitudeLine.setAttribute("y1", 99);
            altitudeDiagram.appendChild(this.altitudeLine);
            this._altitudeAngle = touch.altitudeAngle;
            this.element.appendChild(altitudeDiagram);
        }

        this.element.appendChild(this.root);
        this._x = 0;
        this._y = 0;
        this._size = 0;
        touchObjects[touch.identifier] = this;
        document.getElementById("touches").appendChild(this.element);
        this._update();
    }
    get position() {
        return {x: this._x, y: this._y};
    }
    set position(newPosition) {
        this._x = newPosition.x;
        this._y = newPosition.y;
        this._update();
    }
    get size() {
        return this._size;
    }
    set size(newSize) {
        this._size = newSize;
        this._update();
    }
    get azimuthAngle() {
        return this._azimuthAngle;
    }
    set azimuthAngle(newAzimuthAngle) {
        this._azimuthAngle = newAzimuthAngle;
        this._update();
    }
    get altitudeAngle() {
        return this._altitudeAngle;
    }
    set altitudeAngle(newAltitudeAngle) {
        this._altitudeAngle = newAltitudeAngle;
        this._update();
    }
    delete () {
        document.getElementById("touches").removeChild(this.element);
        this.element = null;
    }
    _update() {
        this.element.style.transform = `translate(${this._x}px, ${this._y}px)`;
        this.touchCircle.setAttribute("r", 50 + Math.round(this._size * 49));
        if (this._touchType == "stylus") {
            var x = Math.round(100 - Math.cos(this._azimuthAngle) * 80);
            var y = Math.round(100 - Math.sin(this._azimuthAngle) * 80);
            this.line.setAttribute("x2", x);
            this.line.setAttribute("y2", y);
            x = Math.round(Math.cos(this._altitudeAngle) * 99);
            y = Math.round(100 - Math.sin(this._altitudeAngle) * 99);
            this.altitudeLine.setAttribute("x2", x);
            this.altitudeLine.setAttribute("y2", y);
        }
    }
}

window.addEventListener("load", init, false);

function handleTouchStart(event) {
    event.preventDefault();
    window.addEventListener("touchmove", handleTouchMove, false);
    window.addEventListener("touchforcechange", handleTouchMove, false);
    window.addEventListener("touchend", handleTouchEnd, false);
    window.addEventListener("touchcancel", handleTouchEnd, false);

    Array.from(event.changedTouches).forEach(function (touch) {
        touchObjects[touch.identifier] = new TouchObject(touch);
    });
    updateTouches(event.touches);
}

function handleTouchMove(event) {
    event.preventDefault();

    updateTouches(event.touches);
}

function handleTouchEnd(event) {
    event.preventDefault();
    Array.from(event.changedTouches).forEach(function (touch) {
        var touchObject = touchObjects[touch.identifier];
        touchObject.delete();
        touchObjects[touch.identifier] = undefined;
    });
    updateTouches(event.touches);

    if (!event.touches || !event.touches.length) {
        window.removeEventListener("touchmove", handleTouchMove);
        window.removeEventListener("touchforcechange", handleTouchMove);
        window.removeEventListener("touchend", handleTouchEnd);
        window.removeEventListener("touchcancel", handleTouchEnd);
    }
}

function updateTouches(touches) {
    Array.from(touches).forEach(function (touch) {
        var touchObject = touchObjects[touch.identifier];
        if (touchObject) {
            touchObject.position = {x: touch.pageX, y: touch.pageY};
            if (touch.force) {
                touchObject.size = touch.force;
                touchObject.azimuthAngle = touch.azimuthAngle;
                touchObject.altitudeAngle = touch.altitudeAngle;
            }
        }
    });
}

function init() {
    container = document.getElementById("container");
    container.addEventListener("touchstart", handleTouchStart, false);
}

</script>
</head>
<body>
<div id="touches"></div>
<div id="container"></div>
</body>
</html>