How do I animate a Fabric.js element?

• 0
  Good afternoon, people, help animate the circles, it doesn't work ..
  

  var canvas = new fabric.Canvas('start');
  
  canvas.interactive= false;
  canvas.selection = false;
  
  let i = 0;
  let timer;
  
  
  canvas.on('mouse:down', function(e){
      // console.log( canvas);
      
          main = new fabric.Circle({ 
              top: e.pointer.y,
              left: e.pointer.x, 
              radius: 15, 
              fill: '', 
              strokeWidth: 2,
              stroke: 'black',
              hasControls: true,
              hasBorders:     false,
          });
      canvas.add(main).setActiveObject(main);
      
      timer = setInterval(function() {
          i++;
  
          console.log(i);
      }, 100);
  
      
  })
  canvas.on('mouse:up', function (e) {
      clearInterval(timer);
      canvas.getActiveObject().setRadius(2*i);
      canvas.renderAll();
      i = 0;
      
  })

  JavaScript Anonymous, Mar 31, 2020

---

0 Answers