Skip to main content
L
Loopaloo
Buy Us a Coffee
All ToolsImage ProcessingAudio ProcessingVideo ProcessingDocument & TextPDF ToolsCSV & Data AnalysisConverters & EncodersWeb ToolsMath & ScienceGames
Guides & BlogAboutContact
Buy Us a Coffee
L
Loopaloo

Free online tools for developers, designers, and content creators. All processing happens entirely in your browser - your files never leave your device. No uploads, no accounts, complete privacy.

support@loopaloo.com

Tool Categories

  • Image Tools
  • Audio Tools
  • Video Tools
  • Document & Text
  • PDF Tools
  • CSV & Data
  • Converters
  • Web Tools
  • Math & Science
  • Games

Company

  • About Us
  • Contact
  • Blog
  • FAQ

Legal

  • Privacy Policy
  • Terms of Service
  • Disclaimer

Support

Buy Us a Coffee

© 2026 Loopaloo. All rights reserved. Built with privacy in mind.

Privacy|Terms|Disclaimer
  1. Home
  2. Image Processing
  3. Drawing Canvas & Whiteboard
Add to favorites

Drawing Canvas & Whiteboard

Free online drawing canvas and whiteboard. Draw, sketch, and create with brushes, shapes, colors, undo/redo, and export to PNG or JPG.

A simple, browser-based drawing tool. Pick up a brush, choose colors, adjust line width, and sketch directly on a blank canvas or on top of an uploaded image. Useful for quick mockups, annotations, digital doodling, or creating simple graphics from scratch. No software to install.

Edits stay in your browserMore image processingJump to full guide

Initializing in your browser…

You might also like

Image Edge Detector

Detect and highlight edges using Sobel, Canny, and other algorithms. Features threshold control, direction filters, and contour extraction.

Image Annotator

Annotate images with arrows, shapes, text, highlights, and blur regions. Perfect for screenshot markup, tutorials, and documentation.

SVG to PNG/JPG

Convert SVG vector graphics to high-quality raster images (PNG, JPG, WebP) with custom scaling and background options.

Drawing Canvas & Whiteboard: a worked example

You need to sketch a quick architecture diagram to paste into a design doc, no app install.

Input

Freehand + shapes + text on an infinite canvas
Drawing Canvas & Whiteboard produces

Output

A PNG/SVG export of the whiteboard sketch

A lightweight canvas with pen, shapes, and text covers the 90% case of a quick diagram without launching heavyweight software. Exporting to SVG keeps the sketch crisp when embedded in docs.

Why Use Drawing Canvas?

A simple, browser-based drawing tool. Pick up a brush, choose colors, adjust line width, and sketch directly on a blank canvas or on top of an uploaded image. Useful for quick mockups, annotations, digital doodling, or creating simple graphics from scratch. No software to install.

How to use

  1. 1Start with a blank canvas or upload a background image
  2. 2Select a brush tool, color, and line width
  3. 3Draw freely on the canvas
  4. 4Use the eraser to correct mistakes
  5. 5Download your drawing as PNG

Where this helps

  • Quick mockups

    Sketch layout ideas or wireframes without opening a full design application.

  • Image annotation

    Draw circles, arrows, or notes directly onto photos and screenshots.

  • Digital doodling

    A lightweight space for creative sketching and brainstorming.

  • Simple graphic creation

    Create basic icons, diagrams, or illustrations for presentations.

Key features

  • Freehand brush drawing
  • Color picker with preset palette
  • Adjustable brush size and opacity
  • Eraser tool
  • Draw on blank canvas or uploaded image
  • Undo/redo support
  • Export as PNG

Tips & best practices

  • Zoom in on your browser tab for finer control when drawing small details.
  • Use a stylus or drawing tablet for smoother lines if you have one available.

Examples

  • Sketch with transparent cut-outs

    Draw on a new layer with the Brush, then switch to the Eraser to cut shapes out; the eraser uses destination-out so the holes are truly transparent over the checkerboard. Export as PNG to preserve them.

  • Flat-color fill with tolerance

    Outline a region with the Pen, then use the Fill tool; its stack-based flood fill spreads across pixels within a tolerance of 32 per channel, so slightly anti-aliased edges still get filled without leaking through hard outlines.

  • Multi-layer composition with opacity

    Put a base illustration on the Background layer and shading on a new layer, then drop that layer's opacity slider to blend it in; the layers composite over a gray checkerboard and the flattened result exports as a single PNG.

How it works

Drawing Canvas is a raster (pixel) editor: every stroke is rendered straight into a layer's pixels and cannot later be selected and moved as a vector object. The Pen and Brush tools both run on the perfect-freehand library's getStroke, which turns your pointer path into a filled outline; the difference between them is the thinning parameter, 0.5 for Pen and 0.7 for Brush, so the Brush tapers more sharply with speed, while both share smoothing and streamline of 0.5. Pressure feeds in through the browser's Pointer Events API (e.pressure), so a stylus that reports pressure varies the stroke width; on a plain mouse it falls back to a constant 0.5 and simulatePressure fills in the taper. The Eraser is a real eraser, not white paint: it strokes with globalCompositeOperation set to destination-out, so it cuts genuine transparency into the layer rather than covering pixels. Brush size runs 1 to 128 px (the [ and ] keys nudge it by 4), and a separate opacity slider applies per finalized stroke via globalAlpha.

Beyond freehand there are five geometric tools, drawn live on a separate preview canvas while you drag and only baked into the active layer on release: Line, Rectangle, Ellipse, Triangle, and a five-pointed Star whose inner radius is fixed at 0.4 of the outer radius. For the closed shapes (rectangle, ellipse, triangle, star), independent Fill and Stroke toggles let you draw outline-only, fill-only, or both, using the primary color for stroke and the secondary color for fill (clicking the small swatch swaps the two). The Fill (paint bucket) tool is a stack-based flood fill with a color tolerance of 32 per RGBA channel, so it spreads across near-matching pixels rather than requiring an exact match; the Eyedropper samples a single pixel from the composited image to set your color, and a Text tool stamps a string at the click point in one of five fonts (Inter, Arial, Georgia, Courier New, Comic Sans) at 8 to 200 px. Color input comes from a 25-swatch palette plus a react-colorful hex picker.

The document is fully layered, each layer is its own offscreen canvas with independent visibility, lock, and opacity (0 to 100%); you can add, duplicate, reorder, rename, and delete layers, and a gray (#e0e0e0 / #c0c0c0) checkerboard renders behind everything to show transparent areas. Undo/redo is a snapshot history: after each edit every layer is serialized with toDataURL and pushed onto a stack capped at 50 states (Ctrl/Cmd+Z and Ctrl/Cmd+Y or Shift+Z), which means deep history on a large multi-layer canvas holds full PNG copies in memory. The canvas is 1280x720, with zoom from 10% to 400% (in 10% steps) and a toggleable 20px grid. Export writes the flattened composite, so transparency is preserved as PNG; the JPG and WebP options encode at quality 0.92, and JPG flattens any transparency away. Everything runs in the browser canvas with no server upload.

Frequently asked questions

Can I draw on top of an existing image?

Yes. Upload an image as the background, then draw on top of it.

Is there an undo feature?

Yes. Undo and redo buttons let you step backward and forward through your drawing history.

What file format is the output?

PNG, which supports transparency if your canvas background is transparent.

Private by design

Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.