JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div id="toolbar">
  <button onclick="changeColor()">Change Color</button>
  <button onclick="changeSize()">Change Size</button>
  <button onclick="clearCanvas()">Clear Canvas</button>
</div>

<canvas id="drawingCanvas" width="800" height="600"></canvas>

CSS

body {
      margin: 0;
      overflow: hidden;
    }

    #toolbar {
      display: flex;
      padding: 5px;
      background-color: #f4f4f4;
    }

    #toolbar button {
      margin-right: 5px;
      padding: 8px;
      cursor: pointer;
    }

    canvas {
      border: 1px solid #ccc;
      display: block;
    }

JavaScript

const canvas = document.getElementById('drawingCanvas');
  const context = canvas.getContext('2d');

  let drawing = false;
  let color = 'black';
  let size = 5;

  function changeColor() {
    color = prompt('Enter color name or code:', color) || color;
  }

  function changeSize() {
    size = prompt('Enter pen size:', size) || size;
  }

  function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
  }

  function startDrawing(event) {
    drawing = true;
    draw(event);
  }

  function stopDrawing() {
    drawing = false;
    context.beginPath();
  }

  function draw(event) {
    if (!drawing) return;

    context.lineWidth = size;
    context.lineCap = 'round';
    context.strokeStyle = color;

    context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
    context.stroke();
    context.beginPath();
    context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
  }

  canvas.addEventListener('mousedown', startDrawing);
  canvas.addEventListener('mouseup', stopDrawing);
  canvas.addEventListener('mousemove', draw);