The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create a simple virtual whiteboard

Written by

Bernardo Palos

in

Here is a simple virtual whiteboard using HTML, CSS, and JavaScript. You can run this code in any modern browser or embed it in your own website:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Virtual Whiteboard</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #f0f0f0;
    }
    canvas {
      border: 2px solid #333;
      display: block;
      margin: 20px auto;
      background: #fff;
      cursor: crosshair;
    }
    #controls {
      text-align: center;
      margin-top: 10px;
    }
    button {
      padding: 10px 15px;
      margin: 0 5px;
      font-size: 16px;
    }
  </style>
</head>
<body>

<canvas id="whiteboard" width="1000" height="600"></canvas>
<div id="controls">
  <button onclick="clearBoard()">Clear</button>
  <button onclick="toggleEraser()">Eraser</button>
</div>

<script>
  const canvas = document.getElementById('whiteboard');
  const ctx = canvas.getContext('2d');
  let drawing = false;
  let eraser = false;

  canvas.addEventListener('mousedown', () => drawing = true);
  canvas.addEventListener('mouseup', () => drawing = false);
  canvas.addEventListener('mouseleave', () => drawing = false);

  canvas.addEventListener('mousemove', draw);

  function draw(e) {
    if (!drawing) return;
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = eraser ? '#fff' : '#000';
    
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
  }

  function clearBoard() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
  }

  function toggleEraser() {
    eraser = !eraser;
  }
</script>

</body>
</html>

This whiteboard includes:

  • Drawing with a mouse

  • A clear button to reset the canvas

  • An eraser toggle to switch between drawing and erasing

Let me know if you’d like advanced features like color picking, saving drawings, or multi-user collaboration.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About