JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<canvas id="canvas" width="500" height="500">
		webgl couldn't be started
	</canvas>
</body>

JavaScript

canvasHolder = document.getElementById( 'canvas' );
context = canvasHolder.getContext('2d');

context.fillStyle = "#AAAAAA";
context.fillRect( 0, 0, 500, 500);

then = Date.now();
setInterval(main, 1);

var cube_x_position = 0;

function main()
{
	context.beginPath();
	context.moveTo(100, 20);
	context.lineTo(200, 160);
	context.quadraticCurveTo(230, 200, 250, 120);
	context.bezierCurveTo(290, -40, 300, 200, 400, 150);
	context.lineTo(500, 90);
	context.lineWidth = 5;
	context.strokeStyle = 'blue';
	context.stroke();

	context.fillRect(cube_x_position, 0, canvasHolder.width, canvasHolder.height);

	if(cube_x_position < canvasHolder.width)
	{
		cube_x_position += 1;
	}

}