Files & Images Runs locally Ready to use Built-in examples No tracking

Signature Generator

Draw your signature on the canvas with a mouse, finger or stylus, undo stroke by stroke, adjust color and width, then export a transparent PNG cropped to your strokes - all rendered locally in your browser.

Signing a contract, initialling a document or adding a sign-off to an email — a reusable electronic signature is increasingly expected. Scanning a signature on paper means photographing it, cutting it out and cleaning up the background, and the edges still come out grey; drawing directly on screen is simpler, because the strokes are clean lines to begin with, and the export keeps only the strokes on a transparent background, so it sits invisibly on a white document.

A spoiled stroke does not mean starting over: undo removes the last stroke, colour and width take effect immediately, and the export happens when it looks right. The exported image is cropped to the extent of the strokes plus a margin, so no large blank area comes along, and the transparent channel keeps it clean on dark backgrounds too. A signature is personal, so everything from drawing to export happens in the browser and not one byte of the strokes leaves the machine.

—
—

How to use

  1. Draw the signature on the canvas with a mouse, finger or stylus.
  2. Undo the last stroke if one goes wrong, and adjust colour and width.
  3. Check the cropped output.
  4. Export a transparent PNG signature.

How it works

Writing naturally

Slow down and finish each stroke in one motion, rounding the turns for the most natural look; a touchscreen or stylus beats a mouse if control is hard. Undo a single bad stroke rather than clearing everything; blue-black ink reads more like a pen signature than pure black.

Using the transparent PNG

The transparent PNG drops straight into Word, WPS or a PDF editor's image layer — drag it onto the signature line, no cutout needed; it works as an email signature too. On dark backgrounds, rewrite in a lighter ink for contrast.

Export sizing

The export auto-crops to the strokes' bounding box plus margin — sign large, export large, with no blank canvas attached. For fixed sizes (a contract system demanding 200x80, say), write within a similar area, or adjust afterwards with an image resizer.

Privacy by design

Nothing is uploaded. Drawing, undo and export all happen locally, the page has no upload step, and strokes vanish when the page closes. Guard the exported PNG — don't send the original to untrusted parties, or someone could cut it out and misuse it.

Code example

JavaScript Capture strokes and export a transparent PNG 

// pointer events beat mousedown + mousemove: touch and pens work out of the box
function drawSignature(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = 3;
  ctx.lineCap = 'round';                  // without it the joins show square corners
  ctx.lineJoin = 'round';
  ctx.strokeStyle = '#111';
  let drawing = false;
  const points = [];
  canvas.addEventListener('pointerdown', (e) => {
    drawing = true;
    points.push([e.offsetX, e.offsetY]);
    canvas.setPointerCapture(e.pointerId);
  });
  canvas.addEventListener('pointermove', (e) => {
    if (!drawing) { return; }
    points.push([e.offsetX, e.offsetY]);
    ctx.beginPath();
    ctx.moveTo(points[points.length - 2][0], points[points.length - 2][1]);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  });
  canvas.addEventListener('pointerup', () => { drawing = false; });
  // the transparent background is the point: no fill, so the PNG drops onto a document
  return () => canvas.toDataURL('image/png');
}

Python Draw a stroke and export a transparent PNG 

from PIL import Image, ImageDraw

# RGBA with no fill -> a transparent PNG that will not cover the document text
canvas = Image.new('RGBA', (600, 200), (0, 0, 0, 0))
draw = ImageDraw.Draw(canvas)
draw.line([(40, 150), (140, 60), (240, 140), (340, 50), (520, 120)], fill=(17, 17, 17, 255), width=4, joint='curve')
canvas.save('signature.png')

FAQ

Can a generated signature be used commercially?

Your own handwriting belongs to you — signing contracts and receipts is fine. The tool doesn't imitate celebrities' hands, so no font licensing is involved either.

Why PNG instead of JPG?

JPG has no alpha channel — a signature would carry a white box onto documents. PNG's transparency keeps only the strokes, which is why it's the de facto e-signature format.

Can I sign with a finger on my phone?

Yes. The canvas supports touch and stylus, portrait orientation included; landscape gives more room, and a stroke width of 3+ reads better.

I botched one stroke — now what?

"Undo stroke" retracts only the last one, keeping the rest; "clear" starts over. Undo stacks — keep tapping back to the stroke you liked.

Can I save a signature for reuse?

There's no cloud storage — the signature exists only on the current page. Export the PNG to your phone or computer and insert it as an image next time, or process it further with image tools.

Are the exported edges jagged?

Strokes render with round caps and anti-aliasing — smooth on normal and high-density screens. Enlarging a small export many times will show jaggies; write larger and export bigger if you need size.

How does this differ from fancy signature-design sites?

Those sites fake handwriting with fonts, which legal documents may not accept. This tool digitizes your real hand — the same standing as your own signature — with no font dependency at all.