Web-based Digital Whiteboard JavaScript, Canvas

👤 Sharing: AI
```javascript
<!DOCTYPE html>
<html>
<head>
<title>Digital Whiteboard</title>
<style>
  #whiteboard {
    border: 1px solid black;
    cursor: crosshair;
  }
  body {
    font-family: sans-serif;
  }

  #controls {
    margin-bottom: 10px;
  }

  #controls button {
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
  }
</style>
</head>
<body>

<h1>Digital Whiteboard</h1>

<div id="controls">
  <label for="strokeColor">Color:</label>
  <input type="color" id="strokeColor" value="#000000">

  <label for="strokeWidth">Line Width:</label>
  <input type="number" id="strokeWidth" value="5" min="1" max="20">

  <button id="clearButton">Clear</button>
  <button id="undoButton">Undo</button>
</div>

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

<script>
  const canvas = document.getElementById('whiteboard');
  const ctx = canvas.getContext('2d');
  const strokeColorInput = document.getElementById('strokeColor');
  const strokeWidthInput = document.getElementById('strokeWidth');
  const clearButton = document.getElementById('clearButton');
  const undoButton = document.getElementById('undoButton');

  let drawing = false;
  let lastX = 0;
  let lastY = 0;
  let history = [];

  // Default values
  ctx.strokeStyle = strokeColorInput.value;
  ctx.lineWidth = strokeWidthInput.value;
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';


  function startDrawing(e) {
    drawing = true;
    lastX = e.offsetX;
    lastY = e.offsetY;

    // Save current canvas state to history for undo functionality
    history.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
  }


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

    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();

    lastX = e.offsetX;
    lastY = e.offsetY;
  }


  function stopDrawing() {
    drawing = false;
  }


  function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    history = []; // Clear the history as well
  }


  function undoLastAction() {
    if (history.length > 0) {
      ctx.putImageData(history.pop(), 0, 0); // Restore previous state
    } else {
      clearCanvas(); // If no history, just clear the canvas.
    }
  }


  // Event listeners
  canvas.addEventListener('mousedown', startDrawing);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', stopDrawing);
  canvas.addEventListener('mouseout', stopDrawing); // Stop drawing if mouse leaves canvas

  strokeColorInput.addEventListener('change', () => {
    ctx.strokeStyle = strokeColorInput.value;
  });

  strokeWidthInput.addEventListener('change', () => {
    ctx.lineWidth = strokeWidthInput.value;
  });

  clearButton.addEventListener('click', clearCanvas);
  undoButton.addEventListener('click', undoLastAction);


  // Touch support (optional) - Very basic implementation
  canvas.addEventListener('touchstart', function(e) {
      e.preventDefault();  //Prevent scrolling
      const touch = e.touches[0];
      const rect = canvas.getBoundingClientRect();
      const mouseEvent = new MouseEvent("mousedown", {
          clientX: touch.clientX,
          clientY: touch.clientY - rect.top, // Adjust for canvas position
          offsetX: touch.clientX - rect.left,
          offsetY: touch.clientY - rect.top
      });
      canvas.dispatchEvent(mouseEvent);
  }, false);

  canvas.addEventListener('touchend', function(e) {
      e.preventDefault();
      const mouseEvent = new MouseEvent("mouseup", {});
      canvas.dispatchEvent(mouseEvent);
  }, false);

  canvas.addEventListener('touchmove', function(e) {
      e.preventDefault();
      const touch = e.touches[0];
      const rect = canvas.getBoundingClientRect();
      const mouseEvent = new MouseEvent("mousemove", {
          clientX: touch.clientX,
          clientY: touch.clientY - rect.top,
          offsetX: touch.clientX - rect.left,
          offsetY: touch.clientY - rect.top
      });
      canvas.dispatchEvent(mouseEvent);
  }, false);
</script>

</body>
</html>
```
👁️ Viewed: 8
Web-based Digital Whiteboard JavaScript, Canvas

Comments

Site Statistics
