How to achieve moving circle images in html canvas

Question

I am trying to draw several circular images on an html canvas.

For each of my pictures I do the following:

context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, true);
context.closePath();
context.drawImage(images[i], ball.x - ball.radius + 2, ball.y - ball.radius + 2, ball.radius * 2 - 3, ball.radius * 2 - 3)
context.clip() // breaks

When I add clip() it simply breaks. Not sure what I am doing wrong, perhaps my understanding of clips is totally wrong.

Here is my codepen: https://codepen.io/althea16/pen/GRXMmOw See render method lines 80 - 84.

score 1 · Answer 1 · answered Mar 08 '23 at 09:52

Turns out I was missing the context.save()

working code was:

  context.save()
      context.fillStyle = "#000000";
      ball = balls[i];
      ball.x = ball.nextx;
      ball.y = ball.nexty;

      context.beginPath();
      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, true);
      context.clip()
      context.closePath();
      context.drawImage(images[i], ball.x - ball.radius + 2, ball.y - ball.radius + 2, ball.radius * 2 - 3, ball.radius * 2 - 3)

How to achieve moving circle images in html canvas

1 Answers1