graphing onMove events polling on canvas

In this example below you will see how to do a graphing onMove events polling on canvas with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Jason_, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jason_ ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>graphing onMove events polling on canvas</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>drag your mouse through the red box and see the actualy mousemove events returned in a pseudo heat map.</p>
<div id="source"><br></div>
<canvas id="output" width="100" height="500"></canvas>
<button id="clear">clear</button>
<div id="raw" class="comp"><h1>actual events reported</h1>
  <table></table>
</div>
<div id="polled" class="comp"><h1>events grabbed every 16ms</h1>
  <table></table>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Jason_/graphing-onmove-events-polling-on-canvas-VjArmm */
#source, #output {
  width: 100px;
  height: 500px;
  border: solid 1px #f00;
  display: inline-block;
  vertical-align: top;
}

#output {
  border-color: #00f;
  display: inline-block;
}

.comp {
  border: solid 1px #ccf;
  width: 300px;
  display: inline-block;
  vertical-align: top;
}


/*Downloaded from https://www.codeseek.co/Jason_/graphing-onmove-events-polling-on-canvas-VjArmm */
var source = document.querySelector('#source');
var output = document.querySelector('#output');
var clear = document.querySelector('#clear');
var raw = document.querySelector('#raw table');
var polled = document.querySelector('#polled table');

var context = output.getContext('2d');
var currentEvent = { x: -5, y: -5 };
var eventList = [];
var liveEventList = [];
var circleEndPoint = Math.PI * 2;
var x = output.getBoundingClientRect().width / 2;

clear.addEventListener('click', function (output) {
  context.clearRect(0, 0, 300, 500);currentEvent = { x: -5, y: -5 };outputStuff();liveEventList = [];eventList = [];
}, false);

source.addEventListener('mousemove', function (event) {
  currentEvent = { x: event.offsetX, y: event.offsetY };liveEventList.push([event.offsetY, performance.now()]);
}, false);

function draw() {
  context.beginPath();
  context.fillStyle = "rgba(255,0,0,.1)";
  if (currentEvent.y !== -5) eventList.push([currentEvent.y, performance.now()]);
  context.arc(x, currentEvent.y, 3, 0, circleEndPoint, false);
  context.fill();

  window.requestAnimationFrame(draw);
}

function outputStuff() {
  raw.innerHTML = '<tr><td>event #</td><td>Event Y</td><td>Performance.now</td></tr>';
  polled.innerHTML = '<tr><td>frame #</td><td>rAFrame Polled</td><td>Performance.now</td></tr>';

  liveEventList.forEach(function (item, index) {
    return raw.innerHTML += '<tr><td>' + index + '</td><td>' + item[0] + '</td><td>' + item[1] + '</td></tr>';
  });
  eventList.forEach(function (item, index) {
    return polled.innerHTML += '<tr><td>' + index + '</td><td>' + item[0] + '</td><td>' + item[1] + '</td></tr>';
  });
}

draw();

Comments