javascript - How to redraw mouse movement on a canvas? -

i have array of tuples in javascript. there existing library lets me view mouse movements user performed?

ideally lets me replay captured data beginning end. video player (ie play, pause, adjust replay speed), instead of video see how mouse cursor moved. visualization on html5 canvas (ie. square of white pixels representing cursor that's moving through in black html canvas).

simple enough accomplish without library.

• listen mousemove events
• on mousemove, add each mouse position points array
• when requested, run requestanimationframe loop redraws each point points array.

example code , demo:

var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");  var cw=canvas.width;  var ch=canvas.height;  function reoffset(){    var bb=canvas.getboundingclientrect();    offsetx=bb.left;    offsety=bb.top;          }  var offsetx,offsety;  reoffset();  window.onscroll=function(e){ reoffset(); }  window.onresize=function(e){ reoffset(); }    var isdown=false;  var points=[];  var nexttime=0;  var nextn=0;  var duration=1000/60;  ctx.linecap='round';    $("#canvas").mousedown(function(e){handlemousedown(e);});  $("#canvas").mousemove(function(e){handlemousemove(e);});  $("#canvas").mouseup(function(e){handlemouseupout(e);});  $("#canvas").mouseout(function(e){handlemouseupout(e);});    $('#fast').on('click',function(){ duration=1000/60; beginredrawing(); });  $('#slow').on('click',function(){ duration=1000/15; beginredrawing(); });    function beginredrawing(){    if(points.length<2){return;}    nextn=1;    ctx.linewidth=3;    ctx.strokestyle=randomcolor();    requestanimationframe(redraw);  }    function handlemousedown(e){    // tell browser we're handling event    e.preventdefault();    e.stoppropagation();    // current mouse position    ctx.linewidth=7;    ctx.strokestyle='black';    points.length=0;    mousex=parseint(e.clientx-offsetx);    mousey=parseint(e.clienty-offsety);    points.push({x:mousex,y:mousey});    // set dragging flag    isdown=true;  }    function handlemouseupout(e){    // tell browser we're handling event    e.preventdefault();    e.stoppropagation();    // current mouse position              mousex=parseint(e.clientx-offsetx);    mousey=parseint(e.clienty-offsety);    // clear dragging flag    isdown=false;  }    function handlemousemove(e){    if(!isdown){return;}    // tell browser we're handling event    e.preventdefault();    e.stoppropagation();    // current mouse position    mousex=parseint(e.clientx-offsetx);    mousey=parseint(e.clienty-offsety);    points.push({x:mousex,y:mousey});    var n=points.length-1;    linesegment(points[n-1],points[n]);  }    function linesegment(p0,p1){    ctx.beginpath();    ctx.moveto(p0.x,p0.y);    ctx.lineto(p1.x,p1.y);    ctx.stroke();  }    function redraw(time){    if(nextn>points.length-1){return;}    if(time<nexttime){requestanimationframe(redraw);return;}    nexttime=time+duration;    linesegment(points[nextn-1],points[nextn]);    nextn++;    requestanimationframe(redraw);  }    function randomcolor(){     return('#'+math.floor(math.random()*16777215).tostring(16));  }

body{ background-color: ivory; }  #canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <h4>drag create polyline click redraw button below.</h4>  <button id=fast>fast redraw</button>  <button id=slow>slow redraw</button>  <br>  <canvas id="canvas" width=512 height=512></canvas>