CODEWITHSUNDEEP
javascripthtml5-canvas
Happy Coconut
Happy Coconut

Reputation: 1063

Ball follows mouse with delay canvas

So I am kinda beginner here and decided to try and learn working with canvas a little bit. I followed some tutorials and managed to make a 'ball' to follow my mouse. And it works. However there is a delay. When i move my mouse the 'balls' follows my mouse but with delay. It is always late a little bit. So my question is... Is this is how it is supposed to be (that how canvas work and there is no way around it)m or I am doing something wrong.

Here is my javascript code:

let canvas = document.querySelector('canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
};

addEventListener('mousemove', function (event) {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
})

function Ball(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;

    this.update = function() {
        // eventualy some other code here...
        this.draw();
    };

    this.draw = function() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);  
        c.fillStyle = this.color;
        c.fill();
        c.closePath();
    };
};

let ball;
function init() {
    ball = new Ball(mouse.x, mouse.y, 30, 'red'); 
};

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    ball.x = mouse.x;
    ball.y = mouse.y;
    ball.update();
};

init();
animate();

My HTML:

<body>
    <canvas></canvas>
    <script src="javascript.js"></script>
</body>


let canvas = document.querySelector('canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
  x: innerWidth / 2,
  y: innerHeight / 2
};

addEventListener('mousemove', function(event) {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
})

function Ball(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;

  this.update = function() {
    // eventualy some other code here...
    this.draw();
  };

  this.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.fillStyle = this.color;
    c.fill();
    c.closePath();
  };
};

let ball;

function init() {
  ball = new Ball(mouse.x, mouse.y, 30, 'red');
};

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);
  ball.x = mouse.x;
  ball.y = mouse.y;
  ball.update();
};

init();
animate();
<canvas></canvas>

Any help would be greatly appreciated.

P.S. Updated as requested. This is my entire code.

Upvotes: 0

Views: 596

Answers (2)

Joachim
Joachim

Reputation: 275

If you still want the mouse displayed, the best way I could think of was to draw a fake mouse on the ball and hide the real one. Put this code just under where you draw the circle:

canvas.style.cursor = 'none'

c.fillStyle = '#fff'
c.strokeStyle = '#000'

c.save()
c.translate(mouse.x, mouse.y)
c.beginPath()
c.moveTo(0, 0)
c.lineTo(0, 15)
c.lineTo(4, 13)
c.lineTo(7, 18)
c.lineTo(9.5, 17)
c.lineTo(7, 12)
c.lineTo(12, 11)
c.closePath()
c.stroke()
c.fill()
c.restore()

Upvotes: 0

Blindman67
Blindman67

Reputation: 54059

The best you can do is remove the perceptual delay, which is only apparent because you have the mouse and the moving object visible at the same time. The delay is very small and without the cursor people just don't notice.

The example just hides the mouse when it is over the canvas.

Note that you should only hide the cursor is you have something else to represent the mouse position.

let canvas = document.querySelector('canvas');
let c = canvas.getContext('2d');

canvas.style.cursor = "none";

canvas.width = innerWidth-40;
canvas.height = innerHeight-40;

let mouse = {
  x: innerWidth / 2,
  y: innerHeight / 2
};

addEventListener('mousemove', function(event) {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
})

function Ball(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;

  this.update = function() {
    // eventualy some other code here...
    this.draw();
  };

  this.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.fillStyle = this.color;
    c.fill();
    c.closePath();
  };
};

let ball;

function init() {
  ball = new Ball(mouse.x, mouse.y, 30, 'red');
};

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);
  ball.x = mouse.x;
  ball.y = mouse.y;
  ball.update();
};

init();
animate();
<canvas></canvas>

Upvotes: 1

Related Questions