JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<canvas width="300" height="300"></canvas>

JavaScript

var canvas = document.querySelector('canvas'),
	ctx = canvas.getContext('2d'),
    w = canvas.width,
	h = canvas.height,
    x = y = prev_y = 0;
    counter = 0;
    flag = 1;

function step() {
    
    x = Math.sin(counter) * 10 + 100;
    y = Math.cos(counter) * 50 + 100;
    
    if(prev_y > y && flag == 1){
        console.log(prev_y,"Lowest");
        flag = 0;
    }
    if(prev_y < y && flag == 0){
        console.log(prev_y,"Highest");
        flag = 1;
    }
    
    ctx.clearRect(0, 0, w, h);
	ctx.save();    
    ctx.beginPath();
	ctx.arc(x, y, 4, 0, 2*Math.PI, false);
	ctx.fill();    
    ctx.restore();
    
    counter += 0.025;
	window.requestAnimationFrame(step);
    
    prev_y = y;   
    
}
window.requestAnimationFrame(step);