JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="600" height="300" style="background-color:red"></canvas>

JavaScript

var canvas = document.querySelector("canvas");//isoute me document.getElementsByTagName() 
var ctx = canvas.getContext("2d");
var can_width = canvas.width;
var can_height = canvas.height;
var x,y;
var time = 0;
ctx.fillStyle = "#000000";
             
function update(){
    time += 0.1;
    ctx.clearRect(0,0, can_width, can_height);
    x = time;
    y = (can_height/2)+(can_height/2)*Math.sin(time);
    console.log(x, y);
    ctx.fillRect(x*16, y, 25, 25);
    if(time<1000){
        window.setTimeout(update, 1000/30);
    }
    
}               
function init(){
    update();
}
init();