git @ Cat's Eye Technologies The-Dipple / master javascript / mouse-track.html
master

Tree @master (Download .tar.gz)

mouse-track.html @masterraw · history · blame

<!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>