Javascript-форум - Помогите с кликами

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Помогите с кликами (https://javascript.ru/forum/misc/77526-pomogite-s-klikami.html)

Помогите с кликами

Здравствуйте, пожалуйста помогите реализовать код где будет по клику мыши появляться на canvas круг который движется в сторону клика :help: :help: :help:
Я пытался реализовать этот код в функции, но круг то исчезал, то вообще не двигался и ошибки были !

Всемогущий,
А можно макет с вашими попытками?

Здравствуйте, макет к сожалению не могу показать. Но я все круги создавал в этом событии:

canvas.addEventListener.....

Когда я кликал круги не появлялись !

Появляются

<style>
canvas {
    width:300px;
    height:150px;
    border:1px solid black;
}
</style>
<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
    canvas.addEventListener("click", function() {
       ctx.beginPath();
       ctx.arc(75,75,50,0,Math.PI*2,true);
       ctx.stroke();
    });
</script>

А как сделать чтобы появившиеся кружки двигались в направлении клика мыши ? что надое еще написать ?

canvas cursor move ball

Всемогущий,
https://stackoverflow.com/questions/...o-mouse-coords
https://www.c-sharpcorner.com/Upload...sor-move-ball/
код из последней ссылки

<!DOCTYPE HTML>
<html>
<head>
    <title>Cursor Move Ball </title>
    <meta charset="utf-8">
    <style type="text/css">
       canvas { border: 1px solid black; }
    #game{background:Grey}
    </style>
    <script type="text/javascript">
      var a=0;
      var b=0;
      var mA=0;
      var mB=0;
      var delay=10;
      var timer=10;
function init(){
          var canvas = document.getElementById('game');

          //loop calls create each 20 ms
          setInterval(create,10);
          canvas.addEventListener('click', ev_cursor, false);

      }
      function ev_cursor (ev) {
            mA = ev.layerX;
            mB = ev.layerY;
      }
      function create(){
        var canvas = document.getElementById('game');
        if (canvas.getContext){
          var c = canvas.getContext('2d');
          timer+=1;
          c.fillStyle ="Blue";
          c.strokeStyle="#000";
          delay=20-(mB/100);
          accelX=mA-a;
          accelY=mB-b;
          a+=(accelX)/delay;
          b+=(accelY)/delay;
          a+=Math.sin(timer)*accelX/5;
          b+=Math.sin(timer)*accelY/5;
          c.clearRect(0,0,1000,900);
          c.beginPath();
          c.arc(a,b,100,0,Math.PI*2,true);     // 100 is ball size
          c.fill();
        }
      }
    </script>
</head>
<body onload="init();">
 <div><h1>HTML5 Cursor Move Ball </h1></div>
    <canvas id="game" width="1000" height="800" >
    </canvas>
</body>
</html>

Спасибо всем за ответы!) + в карму