Moving circles on html5 canvas

Question

I am drawing circles on an html5 canvas (this.ctx) with the drawCircle function. Now I would like to move the cirlce to a different position with a move Circle function. Is there any way to see the circle move from one place to the other? At this point I am not even sure how to remove the previous circle for a user. Could I assign the arc to an object or so?

customobject.prototype.drawCircle = function drawCircle(userID, x, y) {

 var radius = 10;  
        this.ctx.beginPath();
        this.ctx.arc(100, 00, 10, 0, Math.PI*2, true);
        this.ctx.closePath();
        this.ctx.fillStyle = 'blue';
        this.ctx.fill();
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = '#003300';
        this.ctx.stroke();   
}


customobject.prototype.moveCircle = function moveCircle(userID, x, y) {

}

I did see a way to potentially delete a circle (not animate - move it):

remove circle(x, y, radius){
    this.ctx.globalCompositeOperation = 'destination-out'
    this.ctx.arc(x, y, radius, 0, Math.PI*2, true);
    this.ctx.fill();
}

-> so in this case I would specify the coordinates of the original circle and it would be cut?

I also saw this post on making a circle move. But I don't know how to do that with multiple circles. (Each userID would have a circle)

If you have multiple circles, then best approach would be to use libraries like easel.js. The benefit is you will be able to give each object an ID and can individually perform some actions on them. And ofcourse if you are using custom approach then @philipp is right, you have to clear the canvas and redraw everything using requestAnimationFrame(). — abir_maiti, Mar 08 '17 at 10:45
If there are multiple circles he can also use a simple array like `[{start:, end:, p1:{}, p1:{}, …}, {…}, …]`. And then just loop over that and render each. But If you need more shapes, styles, easing functions, than a library is better. — philipp, Mar 08 '17 at 10:58

philipp · Accepted Answer · 2017-03-08T09:53:48.070

Removing a Circle from the canvas once it is drawn is not possible a priori, you could draw another circle in the place but with the background color set, but that will fast conflict with other drawn objects.

If I am getting this right, you would like to animate the movement of the circle. That is basically done like that:

var start = new Date().getTime(),
    end = start + 1000; //one second of animation
    p1 = { x: 0, y: 0 }, //start coordinates
    p2 = { x: 100, y: 10 }; // end coordinates


function render (progress) {
  var x = p1.x + progress * (p2.x - p1.x),
      y = p1.y + progress * (p2.y - p1.y);

  clearCanvas();
  drawCircle(x,y);
}

function loop () {
  var now = new Date().getTime(),
      progress = (now - start)/(end - start);

  if (progress >= 0 && progress <= 1) {
    render(progress);
    window.requestAnimationFrame(loop);
  }
}

loop();

The basics:

you need an animation loop, no for or while loop, something that uses a timer, setTimeout() or setInterval() would do, but requestAnimationFrame() is made for such things.
Find the progress, in animation this is usually a Number between 0 and 1, where 0 refers to the start, 1 to the end and everything in between the progress.
clear the canvas and re-render everything, depending on the progress.
repeat until the progress is bigger than one.

Moving circles on html5 canvas

1 Answers1