<!DOCTYPE html>
<!--
SPDX-FileCopyrightText: Chris Pressey, the original author of this work, has dedicated it to the public domain.
For more information, please refer to <https://unlicense.org/>
SPDX-License-Identifier: Unlicense
-->
<head>
<meta charset="utf-8">
<title>Tracking the Mouse</title>
<script src="mouse-track.js"></script>
<style>
#canvas { border: 1px solid blue; }
</style>
</head>
<body>
<h1>Tracking the Mouse</h1>
<div>
<canvas id="canvas" width="640" height="100">
Your browser doesn't support displaying an HTML5 canvas.
</canvas>
</div>
<p id="info"></p>
<div>
<button onclick="mt.start();">Record</button>
<button onclick="mt.stop();">Stop</button>
<button onclick="mt.replay();">Replay</button>
<button onclick="mt.clear();">Clear</button>
<button onclick="mt.dump();">Dump</button>
<button onclick="mt.load();">Load</button>
</div>
<p>As the mouse is moved across the canvas, its position
at each point in time is recorded. Clicking the "Replay" button replays
these events, showing a red square where the pointer was.</p>
<textarea id="dump"></textarea>
</body>
<script>
var mt = MouseTracker(document.getElementById('canvas'));
</script>