JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

CSS

body {
  margin: 0;
}

canvas {
  width: 100vw;
  height: 100vh;
}

JavaScript

const ctx = document.getElementById('canvas').getContext('2d')
let w, h, dx = 0

function onResize() {
  w = ctx.canvas.clientWidth * window.devicePixelRatio
  h = ctx.canvas.clientHeight * window.devicePixelRatio
  ctx.canvas.width = w
  ctx.canvas.height = h
}

function draw() {
	ctx.clearRect(0, 0, w, h)
  dx += 10

	ctx.lineWidth = 1
  ctx.strokeStyle = 'black'
  ctx.beginPath()
  ctx.moveTo(0, 0)
  ctx.lineTo(w, h)
  ctx.moveTo(w, 0)
  ctx.lineTo(0, h)
  ctx.moveTo(0, h / 2)
  ctx.lineTo(w, h / 2)
  ctx.moveTo(w / 2, 0)
  ctx.lineTo(w / 2, h)
  ctx.moveTo(w / 2, 0)
  ctx.lineTo(w / 2, h)
  ctx.stroke()
  
  ctx.lineWidth = 5
  ctx.strokeStyle = 'red'
  ctx.beginPath()
  ctx.moveTo(Math.abs((dx % w * 2) - w), 0)
  ctx.lineTo(w - Math.abs((dx % w * 2) - w), h)
  ctx.stroke()

	ctx.fillStyle = 'rgba(255, 0, 0, 0.3)'
  ctx.fillRect(50, 50, w - 100, h - 100)
  
  window.requestAnimationFrame(draw)
}

draw()
onResize()

window.addEventListener('resize', onResize)