JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Infinite Canvas</title>
    <style>
    </style>
  </head>
  <body>
    <canvas id="canvas">Infinite Canvas</canvas>
    <script>
      const canvas = document.getElementById('canvas')
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight

      const context = canvas.getContext('2d')

      let canvasScroll = {
        x: 0,
        y: 0
      }

      class Scene {
        elements = [
          {
            type: 'rect',
            x: 150,
            y: 150,
            width: 200,
            height: 200,
            color: 'rgba(55, 55, 10, 0.3)',
          },
          {
            type: 'rect',
            x: 250,
            y: 300,
            width: 200,
            height: 200,
            color: 'rgba(155, 200, 10, 0.5)',
          }
        ]

        renderScene (offset) {
          context.clearRect(0, 0, canvas.width, canvas.height)
          for (let element of this.elements) {
            if (element.type === 'rect') {
              const offsetX = Math.floor(element.x + offset.x)
              const offsetY = Math.floor(element.x + offset.y)
              context.translate(offsetX, offsetY)
              context.fillStyle = element.color
              context.fillRect(
                element.x,
                element.y,
                element.width,
                element.height
              )
              context.translate(-offsetX, -offsetY)
            } else {
              console.error(`type: ${element.type} is not supported`)
            }
          }
        }
      }

      const scene = new Scene()
      scene.renderScene(canvasScroll)

      canvas.addEventListener('wheel', e => {
        e.preventDefault()
        canvasScroll.x -= e.deltaX
        canvasScroll.y -= e.deltaY
       ...