Signature Drawing

Overview

Draw a signature with a mouse, stylus or finger and export it as a PNG with either a transparent or a white background. Pen colour and width are adjustable, strokes can be undone individually, and everything stays on your device - a signature is about as private as input gets, so nothing is transmitted.

How It Works

Draw in the canvas panel using your pointer, pen or touch. Pick the pen colour and set the width from 1 to 12 with the slider; strokes render with rounded caps and joins so the line looks like ink rather than a wireframe. Toggle the white-background checkbox off to draw over a checkerboard representing transparency. Undo Stroke removes your most recent stroke, Clear wipes the pad, and Download PNG saves the current drawing - refused with a message if the canvas is empty.

Step-by-Step Usage Guide

1. Draw your signature in the canvas with mouse, pen or touch.
2. Adjust pen colour and width until it looks natural.
3. Toggle the white background off if you want a transparent PNG.
4. Download the PNG, or undo and redraw individual strokes.

Technical Specifications & Standards

Input is captured through pointer events with pointer capture, which is the mechanism that makes mouse, touch and stylus behave identically and keeps the stroke tracking your pointer even when it leaves the canvas mid-drag. Coordinates are normalised from display size to the fixed 900 by 340 backing canvas, so the export is the same resolution regardless of your screen. Each stroke is stored as an ordered point list with its own colour and width, drawn as a single path - that data model is what makes per-stroke undo trivial, and it is also why strokes redraw when you toggle the background rather than being composited destructively. Line width in storage is double the slider value to compensate for the down-scaled display. The transparent-PNG export is the practically useful one: drop it into documents or PDFs and only the ink appears. Nothing is persisted - reload the page and the pad is blank, which is the correct behaviour for something signature-shaped.

Targeted Use Cases

• Creating a reusable signature image to paste into documents and forms.
• Producing a transparent PNG for signing PDFs in other tools.
• Collecting a drawn consent or acknowledgement mark on a shared device.
• Making a hand-written-style mark for email footers or invoices.

Notes & Gotchas

• Turn the white background off for signatures you will layer onto other documents.
• Draw with your whole arm on a trackpad-sized canvas; short cramped strokes look unnatural.
• Undo single strokes rather than clearing the whole pad when refining.
• A width of 3 to 6 with rounded joins most closely resembles pen ink.

Frequently Asked Questions