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
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!