javascript/mouse-track.html - The-Dipple (hanging-a-canvas)

mouse-track.html @hanging-a-canvas — raw · history · blame

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

Tree @hanging-a-canvas (Download .tar.gz)

mouse-track.html @hanging-a-canvas — raw · history · blame