How to Draw 2D CAD Online: From Grid Setup to PNG or SVG Handoff

Problem

Starting with random lines often produces inconsistent scale, crooked corners, labels on the edge, or strokes that disappear in a slide or printout. Confirm the tool’s scope first, then inspect the export for its real destination.

Who should use this

Useful for teachers, students, product or event teams, and anyone sharing a quick layout. Precision manufacturing, full layer control, standards-based dimensioning, or engineering sign-off still require dedicated CAD software.

Formula and concept

Start with the canvas purpose and a working scale. For a class sketch, state what one grid cell represents; for a slide, estimate stroke and label size against the real slide width. Canvas pixels are not engineering millimetres or inches by themselves.

Turn on the grid and snap before drawing the main outline. The grid is a visual reference and snap moves endpoints toward regular positions; neither is a measurement instrument. Draw the outer boundary, centerline, and openings first, then add secondary edges.

Use orthogonal mode for horizontal and vertical edges instead of trying to straighten the pointer by eye. It suits room plans, boxes, seating layouts, and simple frames; turn it off for deliberate diagonals or free shapes.

Inspect labels, arrows, and outlines separately. When strokes overlap, preserve the reader’s main path and keep labels away from intersections and canvas edges. The goal is fast understanding of spatial relationships, not filling every pixel.

Before export, read the drawing three ways: inspect strokes at 100%, view it at the intended display size, and open the file in another viewer. PNG suits fixed-pixel slides and print drafts; SVG keeps geometric lines scalable for web or design workflows, provided the recipient supports SVG.

State the tool’s boundary in the handoff. FunnyTools’ 2D CAD board is for quick browser sketches and PNG/SVG output; it does not create a DWG/DXF engineering database or perform tolerance, layer-standard, or manufacturing checks. Clear limits prevent a sketch from being mistaken for construction data.

For assignments or meetings, put the subject, scale assumption, and date in the filename, and keep an uncompressed SVG or source sketch. A lone blurry PNG makes it hard to tell whether the geometry or export size was at fault.

Step by step

1. Record the purpose, audience, scale assumption, and labels that must remain.
2. Open the 2D CAD board, enable the grid, and turn on snap or orthogonal mode as needed.
3. Draw the outer boundary, centerline, and main openings before details and labels.
4. Toggle orthogonal mode deliberately for right angles and diagonals so the wrong constraint is not applied.
5. Read back strokes, labels, boundaries, and overlaps at 100%, target display size, and in another viewer.
6. Choose PNG or SVG for the destination, add the date and scale assumption, download, and keep the source version.

Worked example

A teacher sketches a classroom seating plan. They state that one grid cell represents one row gap, enable grid and orthogonal lines, draw the desk rows and exit path, and place group labels away from strokes. They export PNG for projection and SVG for the handout, both marked “illustration, not to scale” so pixels are not mistaken for centimetres.

Common mistakes

• Leaving the scale assumption unstated and treating canvas pixels as physical units.
• Drawing right angles by eye and letting the outline drift.
• Forgetting to toggle orthogonal mode and forcing an intended diagonal into a right angle.
• Checking only a zoomed preview instead of the text at slide or phone size.
• Making the PNG too small or sending SVG to a system that cannot display it.
• Treating a quick sketch as a dimensioned, toleranced, and approved engineering drawing.