JSFiddle - React, Tailwind, and code Playground

by Vloxxity

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Canvas</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    canvas {
      border: 2px solid #000;
    }

    button {
      margin-top: 10px;
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <button onclick="toggleMode('building')">Add Building</button>
  <button onclick="toggleMode('street')">Add Street</button>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      let isBuildingMode = false;
      let isStreetMode = false;

      function toggleMode(mode) {
        isBuildingMode = mode === 'building';
        isStreetMode = mode === 'street';
      }

      function drawBuilding(x, y, size) {
        ctx.fillStyle = '#888';
        ctx.fillRect(x, y, size, size);
      }

      function drawStreet(x, y, size) {
        ctx.fillStyle = '#ddd';
        ctx.fillRect(x, y, size, size);
      }

      function handleClick(event) {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        const cellSize = 50;
        const gridX = Math.floor(x / cellSize) * cellSize;
        const gridY = Math.floor(y / cellSize) * cellSize;

        if (isBuildingMode) {
          drawBuilding(gridX, gridY, cellSize);
        } else if (isStreetMode) {
          drawStreet(gridX, gridY, cellSize);
        }
      }

      canvas.addEventListener('click', handleClick);
    });
  </script>
</body>
</html>