The Palos Publishing Company

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

Create a simple virtual whiteboard

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.

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

We respect your email privacy

Categories We Write About