How to add elements to a canvas that change over time?

Question

Everytime someone clicks on parts of my website, I'd like to show a circle that becomes larger over time. I thought of doing it via a canvas. So far I managed to add circle to the position where the visitor clicked:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #cccccc;">

    </canvas>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script>

        /* Canvas test. */
        $(function() {
            var c = $("#myCanvas");
            // add element that changes over time,
            $(c).click(function(e) {
                var ctx = this.getContext("2d");
                ctx.beginPath();
                ctx.arc(e.pageX,e.pageY,40,0,2*Math.PI);
                ctx.stroke();
            });
        });

    </script>
</body>
</html>

Is it also possible to have those circles change their radius 1px per 100ms and disappear when their radius in larger than the canvas?

Is it also possible to do this without a canvas?

score 2 · Answer 1 · answered Feb 04 '15 at 14:45

Imgur

Solution :

You have to use requestAnimationFrame, to add element and change over time, push in array the point, and draw circle.

/* Canvas test. */
var circles = [];
var canvas = null;
var ctx = null;

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  circles.forEach(function(arg) {
    var size = 100 - (new Date() - arg.time) / 10;
    if (size <= 0)
      return;
    ctx.beginPath();
    ctx.arc(arg.x, arg.y, size, 0, 2 * Math.PI);
    ctx.stroke();
  });

  requestAnimFrame(loop);
}

$(function() {
  canvas = $("#myCanvas")[0];
  ctx = canvas.getContext("2d");

  window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
  })();

  requestAnimFrame(loop);
});


$(function() {
  var c = $("#myCanvas");
  // add element that changes over time,
  $(c).click(function(e) {
    circles.push({
      time: +new Date(),
      x: e.pageX,
      y: e.pageY
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #cccccc;"></canvas>

Off topic, but, what encoder did you use to create your .gif? :-) — markE, Feb 04 '15 at 17:10

score 0 · Answer 2 · edited May 23 '17 at 12:14

Is it also possible to have those circles change their radius 1px per 100ms and disappear when their radius in larger than the canvas? YES

You can start an animation loop(use raF) and change/stop the growth

Is it also possible to do this without a canvas? YES

Javasccript + SVG or javascript + css3 but these might not be as easy as canvas

edit: found some other usefull question: Expanding circles with CSS3 animations

How to add elements to a canvas that change over time?

2 Answers2

Solution :