canvas with a cursor follower

Question

$(function(){
     var mouseX = 0;
     var mouseY = 0;

     $('body,html').mousemove(function(e){
       var gap = parseInt($('#stalker').css("width")) / 2;
       mouseX = e.pageX - gap;
       mouseY = e.pageY - gap;
       $('#stalker').css('left', mouseX);
       $('#stalker').css('top', mouseY);
     });

     var canvas = document.getElementById('mycanvas');
     if(!canvas || !canvas.getContext) return false;
     var ctx = canvas.getContext('2d');

     ctx.lineWidth = 2;
     ctx.lineJoin = ctx.lineCap = 'round';

     var startX,
         startY,
         x,
         y,
         borderWidth = 5,
         isDrawing = false;

     $('#mycanvas,#stalker').mousedown(function(e){
        startX = e.pageX - $('#mycanvas').offset().left - borderWidth;
        startY = e.pageY - $('#mycanvas').offset().top - borderWidth;
     })
     .mouseup(function(e){
       if(!isDrawing) return;
       x = e.pageX - $('#mycanvas').offset().left - borderWidth;
       y = e.pageY - $('#mycanvas').offset().top - borderWidth;

       ctx.beginPath();
       ctx.moveTo(startX, startY);
       ctx.lineTo(x,y);
       ctx.stroke();
     })


     $('#mycanvas').mouseenter(function(e){
        startX = e.pageX - $('#mycanvas').offset().left - borderWidth;
        startY = e.pageY - $('#mycanvas').offset().top - borderWidth;
      });

     $('body,html').mousedown(function(e){
       isDrawing = true;
     })
     .mouseup(function(e){
       isDrawing = false;
     });

     $('#mycanvas,#stalker').mousemove(function(e){
       if(!isDrawing) return;
       x = e.pageX - $('#mycanvas').offset().left - borderWidth;
       y = e.pageY - $('#mycanvas').offset().top - borderWidth;

       ctx.beginPath();
       ctx.moveTo(startX, startY);
       ctx.lineTo(x,y);
       ctx.stroke();

       startX = x;
       startY = y;
     });

   });

#mycanvas{
  border:5px solid #999;
}
#stalker{
  position:absolute;
  width:80px;
  height:80px;
  border:solid 1px gray;
  border-radius:50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="stalker"></div>
<canvas width="550px" height="500px" id="mycanvas">
</canvas>

I'm trying to make a drawing app with canvas, and I needed a circle that keeps following the cursor while drawing. so I wrote the above code, but it's not really working: if I draw a line slowly it looks fine, but if I move the cursor faster, the line doesn't connect. The line would be like two or three separate lines even though I'm not releasing the mouse click. I thought this could be because #stalker is not catching up the speed of the cursor, so I put "mousedown" and "mousemove" on #mycanvas too, but still it doesn't work.

Does anyone know why?

it looks like this problem happens on a 60hz monitor more frequent than on a 144hz monitor — voodoo, Jan 06 '19 at 19:23

Alexander Vielimchanitsia · Accepted Answer · 2019-01-06T19:32:29.293

you can save mouse positions in an array, and then draw it

a quick example:

$(function(){
 var mouseX = 0;
 var mouseY = 0;

 $('body,html').mousemove(function(e){
   var gap = parseInt($('#stalker').css("width")) / 2;
   mouseX = e.pageX - gap;
   mouseY = e.pageY - gap;
   $('#stalker').css('left', mouseX);
   $('#stalker').css('top', mouseY);
 });

 var canvas = document.getElementById('mycanvas');
 if(!canvas || !canvas.getContext) return false;
 var ctx = canvas.getContext('2d');

 ctx.lineWidth = 2;
 ctx.lineJoin = ctx.lineCap = 'round';

 var startX,
     startY,
     x,
     y,
     borderWidth = 5,
     isDrawing = false,
     lines = [];

 $('body,html').mousedown(function(e){
   isDrawing = true;
   lines.push([]);
 })
 .mouseup(function(e){
   isDrawing = false;
 });

 $('#mycanvas,#stalker').mousemove(function(e){
   if(!isDrawing) return;
   x = e.pageX - $('#mycanvas').offset().left - borderWidth;
   y = e.pageY - $('#mycanvas').offset().top - borderWidth;

   lines[lines.length-1].push([x, y]);

 });

 function render() {
    ctx.clearRect(0, 0, 550, 500);

    for (const line of lines) {
        ctx.beginPath();
        for (const [i, pos] of Object.entries(line)) {
            if (!+i) {
                ctx.moveTo(pos[0], pos[1]);
            } else {
                ctx.lineTo(pos[0], pos[1]);
            }
        }
        ctx.stroke();
    }
 }

 (function loop() {
    render();
    requestAnimationFrame(loop);
 })();

});

at which point of this code, do I do that? – voodoo Jan 06 '19 at 19:20 — voodoo, Jan 06 '19 at 19:20
@voodoo, added an example above – Alexander Vielimchanitsia Jan 06 '19 at 19:32 — Alexander Vielimchanitsia, Jan 06 '19 at 19:32

canvas with a cursor follower

1 Answers1