GitShow/antfu/drauu
antfu

drauu

Headless SVG-based drawboard in browser.

by antfu
drawboard
Star on GitHubForkWebsitenpm

TypeScript

1.5k stars78 forks18 contributorsQuiet · 5mo agoSince 2021v1.0.0MIT

Meet the team

See all 18 on GitHub →
antfu
antfu118 contributions
haykkh
haykkh4 contributions
tonai
tonai3 contributions
benjinus
benjinus2 contributions
btea
btea2 contributions
azaleta
azaleta1 contribution
kermanx
kermanx1 contribution
mzaini30
mzaini301 contribution

Languages

View on GitHub →
TypeScript91.1%
HTML8.4%
CSS0.3%
JavaScript0.2%

Commit activity

Last 12 weeks · 0 commits

Full graph →

Community health

5 of 6 standards met

Community profile →
85
✓README✓License✓Contributing✓Code of Conduct○Issue Template✓PR Template

Recent PRs & issues

Quiet · 1 in progress · Last activity 5mo ago
See all on GitHub →
enieuwy
fix(core): normalize non-pen pressure for freehandOpenPR

Closes #57. Summary This normalizes freehand pressure for non-pen pointer input while preserving real pressure for pen input. Today forwards raw for every pointer type. then feeds those points into with: That means non-pen inputs (, ) can produce different saved freehand geometry at the same nominal brush size, depending on the platform/browser's reported pressure behavior. Change Use real pressure only for pens: This is applied in both coordinate paths of . Why 0.5 is the conventional active-pressure baseline for hardware without meaningful pressure support, and it matches the desktop mouse baseline that many browsers already use. Scope preserves Apple Pencil / pen pressure behavior normalizes mouse and touch to the same freehand pressure baseline does not change line/rect/ellipse behavior beyond using the same point pressure normalization when applicable Verification locally verified downstream that the resulting freehand SVG geometry for synthetic mouse vs touch input at the same brush size becomes consistent after this patch

enieuwy · 2mo ago
enieuwy
Freehand strokes differ between mouse and touch at the same brush sizeOpenIssue

Describe the bug Freehand () strokes generated from mouse input and touch input can produce different saved SVG geometry at the same nominal brush size. This shows up downstream in apps like Slidev where a line drawn on desktop and a line drawn on mobile, both at the same brush size, do not match when viewed side by side later on the same screen. Why this seems to happen passes freehand points into with: and point pressure comes directly from in for all pointer types. That means non-pen inputs (, ) can produce different freehand geometry depending on the platform/browser's reported pressure behavior. Expected behavior For non-pen input, the same nominal brush size should produce consistent saved freehand geometry across mouse and touch. Pen input should still preserve real pressure sensitivity. Proposed direction Normalize non-pen pressure to a stable baseline (for example ) while preserving real pressure for . That keeps stylus behavior intact while making mouse/touch output deterministic. Minimal patch In , change the pressure passed into points from: to: in both coordinate paths of .

enieuwy · 2mo ago
ifigueroap
No shortcut for changing to eraserOpenIssue

Clear and concise description of the problem !Image There is no keyboard shortcut to select the "Eraser" tool. This would be very helpful when working with a stylus, as one can configure the pen buttons to toggle between "Stylus" and "Eraser". Suggested solution Implement a keyboard shortcut to select the "Eraser" tool. Alternative _No response_ Additional context _No response_ Validations [x] Follow our Code of Conduct [x] Read the Contributing Guide. [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

ifigueroap · 6mo ago

Recent fixes

View closed PRs →
TheNoim
fix: Apple pencil with "Scribble" enabledMergedPR

Description On an iPad, if you have "Scribble" enabled, you have to cancel the touchmove event. Otherwise, only around every second stroke gets registered. Scribble is an Apple Pencil feature, where you can enter text in any input field via human handwriting. More context: https://mikepk.com/2020/10/iOS-safari-scribble-bug/ Linked Issues No linked issue. Additional context Here is a quick before and after video: https://github.com/user-attachments/assets/106c0e7b-c1fa-4357-85df-8c8c5929031c

TheNoim · 5mo ago
ProsperBao
feat: add text supportMergedPR

I think as an SVG-based drawing tool in the browser, it should support adding text.

ProsperBao · 11mo ago
benjinus
feat: support `cssZoom` option for older Chrome versionsMergedPR

Description fix a bug where touch and mouse events return incorrect coordinates when the zoom property is applied to the parent element. This issue affects Chrome versions before 96, where event coordinates (clientX, clientY) are not scaled properly according to the zoom factor. For newer versions of Chrome (96+), no adjustment is needed since the browser handles zoom scaling correctly. This fix ensures consistent behavior by manually adjusting event coordinates based on the zoom factor in older versions. Steps to Reproduce 1. Use any Chrome version prior to 96. 2. Apply a zoom property to the drauu svg parent node 3. Observing the result of the drawing, we can see that there is a clear deviation from the actual mouse/touch position. 4. Set the correct cssZoom value in drauu option and draw again, and you can see that the situation has returned to normal. Why This is Needed • Touch and mouse event coordinates are incorrect on older versions of Chrome when zoom is applied, causing misaligned interactions. • This fix makes sure users have a consistent experience regardless of their browser version. Browser Version Coverage • Chrome 81 && 88: Verified the issue exists and is fixed with this patch. • Chrome 96+: Already handles zoom properly; this fix remains compatible. Additional Notes This patch doesn’t interfere with newer Chrome versions and gracefully handles legacy versions. It helps users who still use older browsers without impacting performance or modern browser handling. Let’s make zoomed elements behave nicely! 👋

benjinus · 1y ago
Structured data for AI agents

Repository: antfu/drauu. Description: Headless SVG-based drawboard in browser. Stars: 1506, Forks: 78. Primary language: TypeScript. Languages: TypeScript (91.1%), HTML (8.4%), CSS (0.3%), JavaScript (0.2%). License: MIT. Homepage: https://drauu.netlify.app/ Topics: drawboard. Latest release: v1.0.0 (5mo ago). Open PRs: 1, open issues: 13. Last activity: 5mo ago. Community health: 85%. Top contributors: antfu, haykkh, tonai, benjinus, btea, azaleta, kermanx, mzaini30, TheNoim, JuanM04 and others.

·@ofershap

Replace github.com with gitshow.dev