JSFiddle - React, Tailwind, and code Playground

by schrodingers

JavaScript

function createCanvas() {
  canvas = document.createElement("canvas");
  ctx = canvas.getContext("2d");
  w = canvas.width = 800;
  h = canvas.height = 600;
  document.body.appendChild(canvas);
  ctx.fillStyle = "#333";
  ctx.fillRect(0, 0, w, h);
}

function draw() {
  sz = 15;
  num = 100;
  clrs = ['#e91e63', '#03a9f4', '#8bc34a', '#ffeb3b', '#ff5722'];
  for (let i = 0; i < num; i++) {
    ctx.fillStyle = clrs[i % 4];
    ctx.fillRect(0 + sz * i, h / 2, sz / 1.5, 50 * Math.cos(i) + Math.sin(i));
  }
}




createCanvas();
window.requestAnimationFrame(draw);