JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="screen" data-bg="red"></div>
<div class="screen" data-bg="orange"></div>
<div class="screen" data-bg="pink"></div>
<div class="screen" data-bg="yellow"></div>
<div class="screen" data-bg="green"></div>

CSS

body {
  margin: 0;
}
.screen {
  height: 100vh;
}

JavaScript

function bg (selector = '[data-bg]') {
  const $screens = document.querySelectorAll(selector)
  const $canvas = document.createElement('canvas')
  const ctx = $canvas.getContext('2d')
  
  const drawScreen = (bg, opacity = 1) => {
    const img = new Image()
    const svg = new Blob([`
      <svg xmlns='http://www.w3.org/2000/svg' width='${innerWidth}' height='${innerHeight}'>
        <foreignObject width='100%' height='100%'>
          <div xmlns='http://www.w3.org/1999/xhtml' style='background: ${bg}; opacity: ${opacity}'>
          </div>
        </foreignObject>
      </svg>
    `], {type: 'image/svg+xml;charset=utf-8'})
    const url = URL.createObjectURL(svg)
    img.onload = () => {
      ctx.drawImage(img, 0, 0)
      URL.revokeObjectURL(url)
    }
    img.src = url
  }
  
  setInterval(() => {
  	ctx.clearRect(0, 0, innerWidth, innerHeight)
  
    Array.from($screens).map($screen => {
      drawScreen($screen.dataset.bg)
    })
  }, 1000)


  $canvas.setAttribute('style', 'position: fixed; width: 100%; height: 100%; left: 0; top: 0;')
  
  document.body.appendChild($canvas)
}

bg()