JSFiddle - React, Tailwind, and code Playground

by atesgoral

HTML

<canvas width="600" height="600"id="c"></canvas>

JavaScript

x=c.getContext('2d');
x.fillStyle="#000";
x.fillRect(0, 0, c.width, c.height);
x.globalAlpha=.95;
x.globalCompositeOperation='softlight';
p=0;

d=_=>{
  x.fillStyle=`hsl(${Math.sin(p/200)*180+180},50%,50%)`;
  x.beginPath();
  x.arc(300+Math.cos(p/50)*200,300+Math.sin(p/25)*Math.cos(p/75)*200,2,0,Math.PI*2);
  x.fill();
  
  //u = c.toDataURL(Math.random()<Math.abs(Math.sin(p/100))?'image/jpg':'image/png',0);
  u = c.toDataURL(Math.random()<.5?'image/jpg':'image/png',0);
  l=u.length;
  k=(Math.random())*l|0;
  if (Math.random()<.1) u=u.substr(0,k)+String.fromCharCode(u.charCodeAt(k)|1)+u.substr(k+1);
  i=new Image();
  i.src=u;
  if (1) {
  c2=document.createElement('canvas');
  c2.width=c2.height=600;
  x2=c2.getContext('2d');
//  x2.restore();
  x2.translate(300,300);
  //x2.rotate(p/5000);
  x2.rotate(Math.sin(p/500)*Math.PI);
  x2.drawImage(i,-300,-300);
  //x2.drawImage(i,0,0);
  }
  x.drawImage(c2,0,0);
  p++;
  setTimeout(_=>requestAnimationFrame(d),40);
};

d();