szimek/signature_pad ? reverse-engineered prompt

Build me a browser signature drawing component for an HTML5 canvas that feels smooth and natural when someone writes their name with a mouse, finger, or stylus.

I want it to capture strokes with variable line width so fast moves look thinner and slow moves look thicker, and it should work well on desktop and mobile without needing any other libraries. It should let me clear the canvas, check whether it has anything drawn on it, and export the signature as a PNG, JPEG, or SVG. I also need to be able to load a signature back in from saved data or an image data URL, and redraw it after a resize.

Please make it handle high DPI screens properly, and include a simple demo page with a canvas, save button, clear button, and basic options like pen color, background color, and line thickness. If anything needs current browser or canvas guidance, look up the latest docs online.