How to draw in your browser

Choosing a brush for the mark you want

Canvasola has four brushes, and each solves a different problem. The Smooth Pen traces a smooth continuous curve, good for outlines and labels. The Calligraphy Pen lays that curve down again with a small offset, giving the line a slanted, doubled edge.

The Web/Spider Brush links every stroke back to nearby points, so a scribble becomes a web of strands. The Crayon/Chalk brush jitters the points and draws at half opacity, which gives a dry, grainy edge. Pick by the mark you need, not by the drawing you are imagining.

Reach the brushes with B, then choose one from the row under the tool: Pen, Calligraphy, Web, Crayon. The active brush stays selected until you change it, and the Size slider in Stroke Options sets the width of the line you draw.

• Smooth Pen for outlines, arrows and small labels
• Calligraphy Pen for a slanted, doubled line edge
• Web/Spider Brush for webs, hatching and texture
• Crayon/Chalk for a dry, rough mark and emphasis

Note: Strokes follow the path of your pointer or finger and do not react to stylus pressure. A heavier line means a wider Size setting, not a harder press.

Switching from brush to shape mid-sketch

Most sketches need a hand-drawn line and a precise box, and the tools need not be chosen once at the start. Press U for the Shape tool and the toolbar offers Rectangle, Ellipse, Polygon (a hexagon), Line, Arrow, Star, Heart and Spiral. Drag on the canvas to place one.

Ink the structure with the Crayon brush, then press U and drop a rectangle over the same area to hold the real label. Delete a shape you dislike with V and Delete, and the ink underneath stays where it was, because the two are separate elements.

The Shape tool keeps whichever shape you used last, so a row of ten boxes does not mean ten trips back to the sub-tool row. The shape guide covers the fill, stroke and blend controls.

• U opens the Shape tool and its eight sub-tools
• Drag on the canvas to size the shape as you draw it
• Delete a shape with V and Delete, and the ink survives
• The last used shape stays active for the next one

Adding text that stays readable

Text is a separate element from your strokes, so a label can move without disturbing the drawing underneath it. Press T and click where the words should start; a text box opens at that point, and the Type flyout sets the family, the size and the alignment.

Keep labels short. A word or two inside a shape reads at a distance, while a sentence makes the reader lean in. When a block genuinely needs a paragraph, set that paragraph as its own text element beside the block.

Ten fonts are available, from Inter through Caveat, Dancing Script and Press Start 2P, so the tone of the page is yours to choose. A text element holds up to 20,000 characters, so no long note is lost to a length limit.

• T starts a text element at the point you click
• Ten fonts, plus size, bold, italic and alignment
• Short labels inside shapes, paragraphs beside them
• One text element holds up to 20,000 characters

Note: Text is stored as text rather than as outlines, so an exported SVG keeps the words as words and they can be restyled in a vector editor afterwards.

Zooming and panning around a large sketch

The canvas surface is infinite, so a drawing can grow past the window in any direction. Zoom runs from 0.1x to 5x. Ctrl/Cmd with the mouse wheel zooms toward the pointer, a plain wheel scrolls across the page, and the Pan tool (H) moves the view while you drag.

When the drawing outgrows the window, the Fit content to view command in Quick actions (Ctrl/Cmd+K) frames every visible element and the mind map in one move. The zoom buttons and the percentage slider set a precise scale for comparing two areas.

Zooming in to fix a label and zooming back out afterwards is normal work. The strokes stay where you drew them while the camera moves around them, so nothing about the sketch changes when the view does.

• Zoom range is 0.1x to 5x
• Ctrl/Cmd with the wheel zooms toward the pointer
• H is the Pan tool; wheel, middle mouse and two fingers also pan
• Fit content to view reframes elements and the map together

Note: There is no grid and nothing snaps to one, so a rectangle stays exactly where you dragged it. That is a help when you want a hand-placed look and a nuisance when you want a tidy row.

Undoing a mistake without losing the draft

Ctrl/Cmd+Z undoes the last change, and Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z redoes it. The history is shared across the canvas, the mind map and App Builder, so an undo can step from a drawing change into a map change without switching modes.

Use it the way you would use a word processor: fix a stroke without saving a copy first. A line in the wrong place is one undo away, and if that undo was the wrong one, the redo brings it straight back.

The Version history panel answers a different question: not what did I just do, but when did this change. Each entry carries a time, so you can find the moment before a large revision and restore that version. The keyboard cheat sheet lists the undo keys.

• Ctrl/Cmd+Z undoes, Ctrl/Cmd+Y redoes
• History is shared by canvas, mind map and App Builder
• Twenty versions are retained
• Version history shows a timestamp for each snapshot

Note: Undo covers the last change rather than the whole session. If you have made forty changes and want the morning back, the Version history panel is the tool, not forty presses of Ctrl/Cmd+Z.

Saving a sketch you can reopen later

The canvas saves itself to your browser as you work. The status line reads Saved locally, and the current document is held in the browser's own storage, so a sketch survives a refresh, a closed tab and a restart of the computer.

Local storage has a size limit, so a sketch you care about is worth exporting as a file. Save Project (.canv) writes a JSON file with a CANV1 header holding the canvas elements, the style, the mind map, the camera and the layout mode. Open Project... reads that file back.

Cloud sync is a separate, optional thing. Sign in and you can keep projects in the cloud too, but the allowance is small: five projects of 2 MB each, and sessions last 30 days. The local copy remains the working copy, and the offline guide shows how to check it.

• Autosave to local storage in this browser profile
• The top bar shows a Saved locally status
• Save Project (.canv) creates a portable file
• Cloud sync is opt-in: five projects, 2 MB each

Note: Local storage belongs to the browser, not to an account. Clearing site data for the app removes the autosaved document, so export a .canv file for anything you want to keep permanently.

Getting the sketch out as PNG, JPG or SVG

The export menu in the top bar has four entries: Export as PNG, Export as JPG, Export as Vector (SVG) and Print current view. PNG keeps a transparent background and suits a sketch on a colored page. JPG flattens everything onto an opaque background and produces a smaller file.

Export as Vector (SVG) is the one to use when the result has to be edited again or scaled without blurring, because text, shapes and brush strokes are written as vector paths. The Print option opens your browser's print dialog, the route to a paper copy and to a PDF that the browser produces rather than Canvasola.

Fit the content to the view before you export, because the export follows the viewport. If half the drawing is off screen, half of it is missing from the file. The export guide lists every format.

• PNG for transparency and lossless detail
• JPG for a smaller file on an opaque background
• Vector SVG when the result will be edited or scaled
• Print current view opens the browser print dialog

A checklist you can reuse

• The brush was chosen for the mark, not by habit
• Shapes and brush strokes were used for different jobs
• Labels read without zooming in
• The view was fitted to the content before exporting
• Mistakes were fixed with undo, not a saved duplicate
• The file was exported, not only left in the browser
• A .canv project file exists for anything worth keeping

Common mistakes to avoid

• One brush for everything. A web brush used for labels produces a mess, and a fine pen used for texture produces nothing. Match the brush to the mark.
• Painting words instead of typing them. Hand-lettered labels cannot be edited, corrected or restyled. Use the Text tool for anything that will be read rather than drawn.
• Exporting at the wrong zoom. The export captures what the viewport can see, so a drawing that spills past the window arrives missing its edges. Fit the view first.
• Leaving the only copy in the browser. Local storage is a convenience, not a backup, and clearing site data wipes it. Export a PNG for sharing and a .canv file for keeping.
• Expecting a grid to line things up. Nothing on the canvas snaps to a grid, so rows drift unless you place them yourself. Align the elements by hand.

Frequently asked questions

Do I need to install anything to draw in the browser?

No. Canvasola runs in a browser tab, and the drawing tools are part of the app you open at /app. There is no desktop program to install and no account to create, and the app keeps working when the connection drops.

Can I draw with a stylus or a graphics tablet?

You can, and strokes follow the pen tip smoothly. The canvas does not read pressure, so a harder press does not produce a thicker line. Change the Size setting instead, and use the Crayon brush for a rougher, more textured result.

Is there a limit on how much I can draw?

A single document holds up to 5,000 elements, with a ceiling of 50,000 points on one element and 200,000 points across the document. A text element takes up to 20,000 characters. Those limits sit far above a normal sketch, but a page that approaches them will feel slow.

Can two people draw in the same canvas?

Not at the same time, and not on the same document. There is no live multi-user editing in Canvasola: one person works in a document, and the way to share a drawing is to export it or to send the .canv project file. That is a real limitation compared with a shared online whiteboard.

This guide is part of the canvas and sketching collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.