JSFiddle - React, Tailwind, and code Playground

by falldeaf

HTML

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

JavaScript

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

function draw() {
  // Set the canvas to a random color
  ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Draw a random shape
  if (Math.random() < 0.5) {
    ctx.beginPath();
    ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 50, 0, 2 * Math.PI);
    ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
    ctx.fill();
  } else {
    ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
    ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 100, 100);
  }
}

setInterval(draw, 1000);