CODEWITHSUNDEEP
javascriptcanvasaddeventlistener
mystreie
mystreie

Reputation: 153

tracking canvas x and y coordinates animation on mousemove event

I am trying to make a circle moving animation with mousemove event, each time the circle will moving from my mouse.x and mouse.ycoordinates on the screen. so I declare my mouse coordinates object and drawCricleobject constructor: 

    var mouse = {
        x:canvas.width/2,
        y:canvas.height/2
    }


        function Circle (x,y,r,dy){
        this.x = x;
        this.y = y;
        this.r = r;
        this.dy = dy;
        this.update = function(){
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
            ctx.fillStyle = 'blue';
            ctx.fill();

            this.y+=this.dy;

            if(this.y<this.r || this.y+this.r>canvas.height){
                this.dy=-this.dy;
            }
        }
    }

and after i add the mousemoveevent so i am thinking i can assign the mouse x/y coordinate through my mouvemove eventListenter:

    var myCircle = new Circle(mouse.x,mouse.y,30,2);

    function animate(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        myCircle.update();
        requestAnimationFrame(animate);
    }

window.addEventListener("mousemove",function(e){
        mouse.x = e.clientX;
        mouse.y = e.clientY;
        animate();
    });

the problem is the mouse.xandmouse.yvalue won't change from the original canvas.width/2value, so i have tried to wrapper my animation()function inside the window.addEventListener instead just calling it within, just like:

    window.addEventListener("mousemove",function(e){
        mouse.x = e.clientX;
        mouse.y = e.clientY;
        var myCircle = new Circle(mouse.x,mouse.y,30,2);

        function animate(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        myCircle.update();
        requestAnimationFrame(animate);
    }
animate();
    });

this could work a bit but it looks really stupid and makes my browser comes huge laggy spikes, is there any other way to do this?

Upvotes: 0

Views: 230

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32859

You would also need to pass the mouse coordinates when calling the update function ...

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var mouse = {
   x: canvas.width / 2,
   y: canvas.height / 2
};

function Circle(x, y, r, dy) {
   this.r = r;
   this.dy = dy;
   this.update = function(x, y) {
      ctx.beginPath();
      ctx.arc(x, y, this.r, 0, Math.PI * 2);
      ctx.fillStyle = 'blue';
      ctx.fill();
      this.y += this.dy;
      if (this.y < this.r || this.y + this.r > canvas.height) {
         this.dy = -this.dy;
      }
   };
}

var myCircle = new Circle(mouse.x, mouse.y, 30, 2);

function animate() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   myCircle.update(mouse.x, mouse.y);
   requestAnimationFrame(animate);
}

canvas.addEventListener("mousemove", function(e) {
   mouse.x = e.offsetX;
   mouse.y = e.offsetY;
});

animate();
body{margin:10px 0 0 0;overflow:hidden}canvas{border:1px solid #e4e6e8}
<canvas id="canvas" width="635" height="208"></canvas>

Upvotes: 1

Related Questions