JamDraw

A friendly vector drawing app that runs in the browser and installs like an app on desktop and phone. Made by Jimmy Jam Studio to draw our own logo and art; offered as-is, free to use (MIT).

• Draw: pen tool (click corners, drag curves), a pressure brush for drawing tablets and phone pens that turns strokes into clean vector shapes (Merge joins touching strokes into one), a Line brush, an eraser that cuts through shapes, and shapes (rounded rectangles, ellipses, polygons, stars)
• Brush feel: Steady (the line trails the pointer on a string, smoothing out wobbles, great with a mouse), a Magnet that pulls your strokes onto the sketch's lines as you trace (Ctrl to draw freely), and under More…: pressure feel (Soft, Normal, Firm), the thinnest a pressure line gets, and tapered ends for strokes without pressure. Shape assist: hold still at the end of a stroke and a rough line, circle, ellipse or arc becomes a clean one. Turn the view like a sheet of paper for comfortable strokes
• Color it in: a fill bucket: tap inside an area closed by lines and it fills with a flat color, tucked under the lines, bridging small gaps (Close gaps). Auto trace turns the sketch into vector shapes on a new layer: one shape per main color (or just the dark ink), with a live preview and settings for colors, detail, smoothing and specks
• Text with a font library: 66 families / 81 styles bundled, sorted into Bubbly, Display, Handwritten, Spooky, Fantasy, Sans and Serif, every one free for commercial use (OFL or Apache, fonts/LICENSES.md); load your own TTF, OTF or WOFF too. Text is real vector outlines from the start, stays editable (font, size, spacing, lines, alignment) and turns into plain shapes for point editing
• Exact and lined up: X, Y, width, height and angle boxes for the selection (with a lock for proportions), and a 3D tilt (a circle turned away becomes the ellipse of a headphone seen from the side; everything selected tilts together, so a logo on it tilts too); snapping to the page's edges and center and to other shapes' edges and centers, with pink guides, plus an optional grid; hold Ctrl while dragging to place freely
• Edit: move, scale, rotate, flip, group, arrange, point and curve-handle editing (brush strokes too: the Points tool reshapes a stroke's middle line and it keeps its widths), combine shapes (unite, subtract, intersect, exclude), outline a stroke, and Sticker outline (one solid outline under the selection: the cartoon-logo look), align to each other or to the page
• Symbols: use one drawing in many places (the cap in every pose): duplicate a symbol for more copies, double-click one to edit it, and every copy changes; Unlink turns a copy back into ordinary shapes
• Organise: layers (show, hide, lock, rename, reorder, and Tracing paper: a layer shown faded and soft, as if under a sheet of paper, to ink over on a layer above; left out of exports and fills), a sketch to trace under the page (move, size, turn, flip; pick its colors with the eyedropper or add its main colors to the swatches in one go), fill and stroke colors with saved swatches, undo and redo
• Export: SVG, PNG, JPG, WebP and PDF, of the whole page, the selection or the drawing trimmed to its edges, any size, transparent or with a background; copy SVG code; .jamdraw files keep everything editable
• Anywhere: mouse and keyboard, drawing tablets (pressure through Windows Ink), phones and their pens, fingers (pinch to zoom; once a pen has been used, fingers only pan, so your palm can rest on the screen). Saves itself in the browser and works offline once installed
• Plain HTML, CSS and JavaScript modules: no build step, no framework, no server

Use it now: https://jimmyjamstudio.com/draw/ (installs like an app; works offline).

Run it

node serve.mjs        # or: npm start

Open http://localhost:5173. In Chrome or Edge, Install app (address bar) gives it its own window and offline use. On a phone, open a hosted copy and use Add to Home screen.

Drawing tablets on Windows: pressure reaches the browser through Windows Ink. If brush lines all come out the same width, turn on Use Windows Ink in the tablet's settings (Wacom: Wacom Tablet Properties › Mapping), and check that Pressure is on in the Brush options.

Shortcuts

Keys	Does
V A P B E R G T I H	Select, points, pen, brush, eraser, shapes, fill, text, pick color, pan
Space + drag, middle mouse, two fingers	Pan
Wheel, pinch, + -	Zoom; 0 fits the page (and straightens it), 1 is 100%
, ., twist two fingers	Turn the view (like turning paper), tap the angle badge to straighten
Ctrl+Z / Ctrl+Shift+Z	Undo / redo
Ctrl+C X V D	Copy, cut, paste, duplicate
Ctrl+G / Ctrl+Shift+G	Group / ungroup
[ ], Ctrl+[ Ctrl+]	Backward, forward; to back, to front
Arrows	Nudge (Shift: 10x)
Ctrl + drag	Place freely, without snapping
X	Swap fill and stroke
Ctrl+S / Ctrl+E	Save a .jamdraw file / Export
Double-click a text	Edit it (Ctrl+Enter done, Esc cancel)

The ? button in the app shows these too.

Test

npm install                  # once: puppeteer-core, to drive Chrome
npm test                     # 450+ checks in headless Chrome, then code coverage for every file in js/
npm test -- --only=text      # just the suites whose name contains "text"
npm test -- --min=100        # also fail if any file's coverage drops under 100%

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗