JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<canvas id="stage" width="500" height="500"></canvas>

Babel + JSX

/**
 * 2D Canvas Test
 */

console.clear();

let canvas = document.getElementById('stage');
let ctx    = canvas.getContext('2d');

let resetBackground = function(){
	ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

let animate = function(){

	resetBackground();

  ctx.fillStyle = '#05a';

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 6;

  ctx.beginPath();
  ctx.moveTo(100, 90 + Math.sin(Date.now() / 100) * 40);
  ctx.quadraticCurveTo(150, 50, 200, 100);
  ctx.lineTo(200 + Math.cos(Date.now() / 200) * 100, 200);
  ctx.quadraticCurveTo(50, 200, 100, 90 + Math.sin(Date.now() / 100) * 40);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
  
  
  ctx.beginPath();
  ctx.moveTo(10 + (Math.random() * 200), 250 + (Math.random() * 200));
  for(let i = 0; i < 20; i++){
  	ctx.lineTo(10 + (Math.random() * 200), 250 + (Math.random() * 200));
  }
  ctx.closePath();
  ctx.stroke();
  ctx.fill();

	ctx.fillStyle = '#00a889';
  ctx.font = '150px sans-serif';
  ctx.fillText('Test', 120, 250);
  ctx.strokeText('Test', 120, 250);
  
  ctx.fillStyle = '#05a';
  ctx.beginPath();
  ctx.moveTo(300, 300 + Math.sin(Date.now() / 1000) * 99);
  ctx.arc(300, 300, 100, 0, (Math.PI / 2) + (Math.PI / 4) * Math.sin(Date.now() / 1000), false);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
  
  requestAnimationFrame(animate);
};

resetBackground();

animate();