JSFiddle - React, Tailwind, and code Playground

JavaScript

r=(t,e)=>~~(e*Math.random()+t);setInterval(_=>x.fillRect(r(0,40),r(0,40),1,1,x.fillStyle=`rgba(${[r(1,255),r(1,255),r(1,255),1]})`),1);x=(d=document).body.appendChild(c=d.createElement`canvas`).getContext`2d`,c.width=c.height=40


// (d=document) to save on repeated `document` references

// use `document.body` instead of `document.getElementsByTagName("body")[0]`

// `appendChild` returns it argument, so instead of
//      c=document.createElement("canvas"),
//      x=c.getContext("2d"),
//      document.body.appendChild(c)
// you can call `getContext` directly on the `appendChild` return value
//      x=document.body.appendChild(
//           c=document.createElement("canvas")
//        ).getContext("2d")

// use bitwise NOT twice `~~` instead of `Math.floor`

// instead of "("+a+","+b+","+c+","+d+")", you can use an array, which serializes its values joined by commas:
//  "("+[1,2,3,4]+")"  becomes "(1,2,3,4)"

// use ES6 function syntax (a,b,c)=>... or a=>....

// use tag-function syntax for providing a single string argument:
// d.createElement`canvas` instead of d.createElement("canvas")

// use `${}` template syntax for inserting a variable between strings:
// instead of "("+a+")" use `(${a})`

// chain assignments: c.width=c.height=40 instead of c.width=40,c.height=40

// you only use `f` once, so just supply the function directly to `setInterval`: setInterval(_=>...) instead of f=_=>...;setInterval(f)

// I moved `x.fillStyle="..." as a fifth, unused argument to `fillRect` so that the function passed into setInterval would be only one single expression (the fillRect call) and therefore wouldn't need brackets or parentheses to go on the right side of the `_=>` fucntion