Myujth

I'm trying to make a simple interaction using canvas and Anime.js, using a modified version of one of Julian's examples. The idea is that a circle would enlarge on screen, then the user clicks anywhere on the screen and the circle would contract. I can't get the second animation to play, not sure if this is because my target is not valid or something to do with the timeline? Here is the example.

//Canvas set up

var canvas = document.querySelector('.gameCanvas');
var ctx = canvas.getContext('2d');
var pointerX = 0;
var pointerY = 0;
var circle;
let basicTimeline = anime.timeline();


function setCanvasSize() 
 canvas.width = window.innerWidth * 2;
 canvas.height = window.innerHeight * 2;
 canvas.style.width = window.innerWidth + 'px';
 canvas.style.height = window.innerHeight + 'px';
 canvas.getContext('2d').scale(2, 2);


//Objects and animation

function createCircle(x,y) 
 var p = ;
 p.x = x;
 p.y = y;
 p.color = "#fff";
 p.radius = anime.random(16, 32);
 p.alpha = .5;
 p.draw = function() 
 ctx.globalAlpha = p.alpha;
 ctx.beginPath();
 ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
 ctx.fillStyle = p.color;
 ctx.fill();
 
 return p;


function renderParticle(anim) 
 for (var i = 0; i < anim.animatables.length; i++) 
 anim.animatables[i].target.draw();
 


function createExpandCircle(x, y) 
 circle = createCircle(x, y);
 basicTimeline.add(
 targets: circle,
 radius: anime.random(80, 160),
 alpha: 
 value: 1,
 easing: 'linear',
 duration: anime.random(600, 800), 
 ,
 duration: anime.random(1200, 1800),
 easing: 'linear',
 update: renderParticle,
 offset: 0
 );



function contractCircle()
 basicTimeline.add(
 targets: circle,
 radius: 20,
 easing: 'easeOutExpo'
 update: renderParticle
 );



//Mouse Events

var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown';

function updateCoords(e) e.touches[0].clientX;
 pointerY = e.clientY 

document.addEventListener(tap, function(e) 
 updateCoords(e);
 contractCircle();
 , false);

var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;

createExpandCircle(centerX, centerY);
setCanvasSize();
window.addEventListener('resize', setCanvasSize, false);

So I was able to solve this by adding the following:

ctx.clearRect(0, 0, canvas.width, canvas.height);

To p.draw, and

basicTimeline = anime.timeline();

To contractCircle.