let counter; const canvas = new fabric.Canvas('gameCanvas', { selection: false }); fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; let circle; document.addEventListener('DOMContentLoaded', function() { circle = makeCircle(52.69, 17.77); canvas.add(circle); }); document.getElementById('animateBtn').addEventListener('click', onBtnClick); async function onBtnClick() { counter = 0; const result = await animateCircle(circle, 1); console.log(result); }; function makeCircle(x, y) { return new fabric.Circle({ left: x, top: y, strokeWidth: 2, radius: 10, fill: 'yellow', stroke: '#666', selectable: false, hoverCursor: 'default', hasControls: false, hasBorders: false }); } function animateCircle(circle, dir) { const minScale = 1; const maxScale = 2; return new Promise((resolve, reject) => { animate(circle, dir) function animate(circle, dir) { circle.animate({ scaleX: dir ? maxScale : minScale, scaleY: dir ? maxScale : minScale }, { easing: fabric.util.ease.easeOutCubic, duration: 3000, onChange: canvas.requestRenderAll.bind(canvas), onComplete: function() { if (counter > 4) { resolve('finished animating the point'); return; } else { if (dir == 1) animate(circle, 0); else animate(circle, 1); } counter++; } }); } }); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script> <canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas> <button id="animateBtn">Animate</button>