JSFiddle - React, Tailwind, and code Playground

by thecoz21

HTML

<canvas></canvas>

CSS

body{
background:#ffdddd;
}

JavaScript

var cv = document.querySelector('canvas');
ct = cv.getContext('2d'),
dq = 10;

setTimeout(disegna,50);

function disegna(){

ct.clearRect(0,0,cv.width,cv.height);
ct.fillStyle="red";
ct.fillRect(10,10,30,30);
ct.strokeRect(50,50,dq,dq);    
ct.clearRect(20,20,10,10);

ct.beginPath();
ct.moveTo(10,10);
ct.lineTo(50,50);
ct.lineTo(50,10);
ct.lineTo(10,10);
ct.closePath();

ct.fillStyle="blue";
ct.fill();
if(dq ++ > 30) dq =10;
setTimeout(disegna,50);
}