{"id":230,"date":"2026-10-03T09:21:47","date_gmt":"2026-10-03T17:21:47","guid":{"rendered":"https:\/\/www.tonybhimani.com\/programming-blog\/?p=230"},"modified":"2026-10-03T10:10:47","modified_gmt":"2026-10-03T18:10:47","slug":"creating-a-simple-web-based-signature-pad-with-html5-canvas","status":"publish","type":"post","link":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/","title":{"rendered":"Creating a Simple Web-Based Signature Pad with HTML5 Canvas"},"content":{"rendered":"

A friend recently asked me if creating a signature pad directly in a web page was difficult.<\/p>\n

His company needed something that would allow a user to sign a document or form electronically, and they were considering asking their existing consultant to build it.<\/p>\n

I told him it wasn’t particularly difficult.<\/p>\n

He asked how I would do it, then decided he didn’t want to know.<\/p>\n

So of course, I started thinking about how I would build it.<\/p>\n

The basic idea is actually pretty simple. Modern web browsers already give us most of what we need. We can use an HTML5 <canvas><\/code> element as a drawing surface, JavaScript to capture the user’s mouse or touch movements, convert the canvas into an image, and then upload that image to a server.<\/p>\n

For this example, we’ll build the basic signature pad ourselves rather than using a third-party signature library.<\/p>\n

There are plenty of libraries available that can provide more advanced functionality, and those may be appropriate for a production application. The goal here is different.<\/p>\n

This is about understanding how it works.<\/p>\n

The Basic Architecture<\/h2>\n

The process looks something like this:<\/p>\n

\"HTML5<\/p>\n

User draws \u2192 Canvas captures the drawing \u2192 \nCanvas becomes a PNG \u2192 PNG is uploaded \u2192 \nServer saves the image<\/strong><\/pre>\n
That’s really all there is to it.<\/p>\n
The browser handles the drawing, while the server handles storing the resulting image.<\/p>\n
For this example, I’ll show both a PHP backend and a Python Flask backend.<\/p>\n
The Frontend<\/h2>\n
We’ll start with a simple HTML page containing a canvas and two buttons.<\/p>\n
One button clears the signature pad, and the other submits the signature.<\/p>\n
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Universal Signature Pad<\/title>\n\n    <style>\n        .pad-container {\n            width: 100%;\n            max-width: 450px;\n            margin: 20px auto;\n            text-align: center;\n            font-family: sans-serif;\n        }\n\n        canvas {\n            border: 2px dashed #ccc;\n            background: #fff;\n            cursor: crosshair;\n            touch-action: none;\n        }\n\n        .controls {\n            margin-top: 15px;\n        }\n\n        button {\n            padding: 12px 24px;\n            margin: 0 5px;\n            cursor: pointer;\n            font-size: 16px;\n            border-radius: 4px;\n            border: 1px solid #ccc;\n        }\n\n        #upload-btn {\n            background: #007BFF;\n            color: white;\n            border: none;\n        }\n    <\/style>\n<\/head>\n\n<body>\n\n<div class="pad-container">\n    <h3>Sign Your Name<\/h3>\n\n    <canvas id="signature-pad" width="400" height="250"><\/canvas>\n\n    <div class="controls">\n        <button id="clear-btn">Clear<\/button>\n        <button id="upload-btn">Submit<\/button>\n    <\/div>\n<\/div>\n\n<script>\n    const canvas = document.getElementById('signature-pad');\n    const ctx = canvas.getContext('2d');\n\n    const clearBtn = document.getElementById('clear-btn');\n    const uploadBtn = document.getElementById('upload-btn');\n\n    let isDrawing = false;\n\n    \/\/ Brush setup\n    ctx.strokeStyle = '#111111';\n    ctx.lineWidth = 3;\n    ctx.lineCap = 'round';\n    ctx.lineJoin = 'round';\n\n    function getXY(e) {\n        const rect = canvas.getBoundingClientRect();\n\n        const clientX = e.touches\n            ? e.touches[0].clientX\n            : e.clientX;\n\n        const clientY = e.touches\n            ? e.touches[0].clientY\n            : e.clientY;\n\n        return {\n            x: clientX - rect.left,\n            y: clientY - rect.top\n        };\n    }\n\n    function startDrawing(e) {\n        isDrawing = true;\n\n        const coords = getXY(e);\n\n        ctx.beginPath();\n        ctx.moveTo(coords.x, coords.y);\n\n        if (e.touches) {\n            e.preventDefault();\n        }\n    }\n\n    function draw(e) {\n        if (!isDrawing) return;\n\n        const coords = getXY(e);\n\n        ctx.lineTo(coords.x, coords.y);\n        ctx.stroke();\n\n        if (e.touches) {\n            e.preventDefault();\n        }\n    }\n\n    function stopDrawing() {\n        isDrawing = false;\n    }\n\n    \/\/ Desktop mouse events\n    canvas.addEventListener('mousedown', startDrawing);\n    canvas.addEventListener('mousemove', draw);\n    window.addEventListener('mouseup', stopDrawing);\n\n    \/\/ Mobile touch events\n    canvas.addEventListener(\n        'touchstart',\n        startDrawing,\n        { passive: false }\n    );\n\n    canvas.addEventListener(\n        'touchmove',\n        draw,\n        { passive: false }\n    );\n\n    window.addEventListener('touchend', stopDrawing);\n\n    \/\/ Clear the signature\n    clearBtn.addEventListener('click', () => {\n        ctx.clearRect(\n            0,\n            0,\n            canvas.width,\n            canvas.height\n        );\n    });\n\n    \/\/ Upload the signature\n    uploadBtn.addEventListener('click', () => {\n\n        canvas.toBlob((blob) => {\n\n            if (!blob) {\n                alert("Canvas is empty.");\n                return;\n            }\n\n            const formData = new FormData();\n\n            formData.append(\n                'signature',\n                blob,\n                'sig_' + Date.now() + '.png'\n            );\n\n            fetch('upload.php', {\n                method: 'POST',\n                body: formData\n            })\n            .then(res => res.json())\n            .then(data => {\n\n                if (data.success) {\n                    alert(\n                        'Uploaded! Saved as: ' +\n                        data.file\n                    );\n                } else {\n                    alert(\n                        'Upload failed: ' +\n                        data.error\n                    );\n                }\n\n            })\n            .catch(err => {\n                console.error('Upload Error:', err);\n            });\n\n        }, 'image\/png');\n    });\n<\/script>\n\n<\/body>\n<\/html>\n<\/pre>\n
Creating the Drawing Surface<\/h2>\n
The important part of the HTML is the canvas:<\/p>\n
<canvas id="signature-pad" width="400" height="250"><\/canvas><\/pre>\n
The canvas gives us a rectangular area that JavaScript can draw into.<\/p>\n
The width<\/code> and height<\/code> attributes define the canvas’s internal drawing dimensions. CSS can then control how the canvas is displayed on the page.<\/p>\n
We obtain the canvas and its 2D drawing context with:<\/p>\n
const canvas = document.getElementById('signature-pad');\nconst ctx = canvas.getContext('2d');<\/pre>\n
The ctx<\/code> object gives us the methods needed to draw on the canvas.<\/p>\n
Drawing the Signature<\/h2>\n
The basic drawing process is straightforward.<\/p>\n
When the user presses the mouse button or touches the screen, we begin a path:<\/p>\n
ctx.beginPath();\nctx.moveTo(coords.x, coords.y);<\/pre>\n
As the pointer moves, we draw lines between the previous position and the new position:<\/p>\n
ctx.lineTo(coords.x, coords.y);\nctx.stroke();<\/pre>\n
By doing this repeatedly while the user moves their finger or mouse, we create what appears to be a continuous handwritten signature.<\/p>\n
The brush itself is configured with:<\/p>\n
ctx.strokeStyle = '#111111';\nctx.lineWidth = 3;\nctx.lineCap = 'round';\nctx.lineJoin = 'round';<\/pre>\n
The rounded line ends and joins make the signature look considerably more natural than using square-ended lines.<\/p>\n
Mouse and Touch Input<\/h2>\n
One of the interesting parts of this example is that it handles both desktop and mobile input.<\/p>\n
On a desktop, we listen for mouse events:<\/p>\n
mousedown\nmousemove\nmouseup<\/pre>\n
On a mobile device, we listen for touch events:<\/p>\n
touchstart\ntouchmove\ntouchend<\/pre>\n
The touch-action: none<\/code> CSS property is also important:<\/p>\n
canvas {\n    touch-action: none;\n}<\/pre>\n
Without it, a browser may interpret a finger movement on the canvas as a request to scroll the page instead of drawing a signature.<\/p>\n
The getXY()<\/code> function converts the mouse or touch position into coordinates relative to the canvas itself.<\/p>\n
Turning the Canvas Into an Image<\/h2>\n
Once the user clicks Submit, we need to turn the drawing into something that can be sent to a server.<\/p>\n
That’s where toBlob()<\/code> comes in:<\/p>\n
canvas.toBlob((blob) => {\n    ...\n}, 'image\/png');<\/pre>\n
The browser creates a PNG image from the canvas and gives us a Blob<\/code> containing the binary image data.<\/p>\n
We then place that blob into a FormData<\/code> object:<\/p>\n
const formData = new FormData();\n\nformData.append(\n    'signature',\n    blob,\n    'sig_' + Date.now() + '.png'\n);<\/pre>\n
The signature can now be sent to the server with a normal HTTP POST request:<\/p>\n
fetch('upload.php', {\n    method: 'POST',\n    body: formData\n});<\/pre>\n
If the site is running over HTTPS, the request is encrypted in transit.<\/p>\n
PHP Backend<\/h2>\n
For a basic PHP implementation, the browser can send the image to an upload.php<\/code> file.<\/p>\n
Here is the complete example:<\/p>\n
<?php\n\nheader('Content-Type: application\/json');\n\n$uploadDir = __DIR__ . '\/signatures\/';\n\nif (!is_dir($uploadDir)) {\n    mkdir($uploadDir, 0755, true);\n}\n\nif ($_SERVER['REQUEST_METHOD'] === 'POST' &&\n    isset($_FILES['signature'])) {\n\n    $file = $_FILES['signature'];\n\n    \/\/ Check the actual uploaded file type.\n    $fileType = mime_content_type($file['tmp_name']);\n\n    if ($fileType !== 'image\/png') {\n        echo json_encode([\n            'success' => false,\n            'error' => 'Invalid image format.'\n        ]);\n\n        exit;\n    }\n\n    \/\/ Generate our own filename.\n    $safeName =\n        'sig_' .\n        bin2hex(random_bytes(8)) .\n        '.png';\n\n    $targetPath = $uploadDir . $safeName;\n\n    if (move_uploaded_file(\n        $file['tmp_name'],\n        $targetPath\n    )) {\n\n        echo json_encode([\n            'success' => true,\n            'file' => $safeName\n        ]);\n\n    } else {\n\n        echo json_encode([\n            'success' => false,\n            'error' => 'Failed to save file.'\n        ]);\n    }\n\n} else {\n\n    echo json_encode([\n        'success' => false,\n        'error' => 'Invalid request data.'\n    ]);\n}\n\n?>\n<\/pre>\n
Notice that the PHP code doesn’t simply trust the filename supplied by the browser.<\/p>\n
It creates its own filename using random_bytes()<\/code>.<\/p>\n
It also checks the uploaded file’s MIME type before saving it.<\/p>\n
For a real production application, additional validation should be added, including upload size limits, authentication and authorization, appropriate storage permissions, and stronger image validation.<\/p>\n
Flask Backend<\/h2>\n
If Python is your preferred environment, the same basic idea can be implemented with Flask.<\/p>\n
import os\nimport uuid\n\nfrom flask import Flask, request, jsonify\n\napp = Flask(__name__)\n\nUPLOAD_FOLDER = '.\/signatures'\nos.makedirs(UPLOAD_FOLDER, exist_ok=True)\n\n\n@app.route('\/upload-signature', methods=['POST'])\ndef upload_signature():\n\n    if 'signature' not in request.files:\n        return jsonify({\n            'success': False,\n            'error': 'No file element received'\n        }), 400\n\n    file = request.files['signature']\n\n    if file.mimetype != 'image\/png':\n        return jsonify({\n            'success': False,\n            'error': 'Invalid file format'\n        }), 400\n\n    filename = f"sig_{uuid.uuid4().hex}.png"\n\n    target_path = os.path.join(\n        UPLOAD_FOLDER,\n        filename\n    )\n\n    file.save(target_path)\n\n    return jsonify({\n        'success': True,\n        'file': filename\n    })\n\n\nif __name__ == '__main__':\n    app.run(ssl_context='adhoc')\n<\/pre>\n
The frontend would need to change the fetch()<\/code> URL from:<\/p>\n
fetch('upload.php', {<\/pre>\n
to something like:<\/p>\n
fetch('\/upload-signature', {<\/pre>\n
when using the Flask API.<\/p>\n
The ssl_context='adhoc'<\/code> option is useful for local HTTPS testing. It creates a temporary development certificate.<\/p>\n
It is NOT<\/strong> intended to be your production Flask deployment.<\/p>\n
For a public application, Flask would normally run behind a production web server or reverse proxy that handles HTTPS.<\/p>\n
A Note About Security<\/h2>\n
This example is intentionally simple.<\/p>\n
An uploaded signature is still an uploaded file, and uploads should never be treated as automatically trustworthy.<\/p>\n
A production application should consider things such as:<\/p>\n
    \n
  • File size limits.<\/li>\n
  • Authentication and authorization.<\/li>\n
  • Server-side image validation.<\/li>\n
  • Safe storage locations.<\/li>\n
  • Access controls.<\/li>\n
  • HTTPS.<\/li>\n
  • Rate limiting.<\/li>\n
  • Protection against users uploading files other than the intended image format.<\/li>\n<\/ul>\n
    You should also think carefully about whether signatures should be publicly accessible by filename. Depending on what the signature is being used for, the uploaded image may contain sensitive information.<\/p>\n
    Why Build It Yourself?<\/h2>\n
    There are plenty of JavaScript libraries that can create signature pads.<\/p>\n
    For a real application, using an established library can make sense. Libraries can provide smoother strokes, pressure sensitivity, better touch handling, undo functionality, vector output, and other features.<\/p>\n
    But sometimes the best way to understand a technology is to remove the abstraction.<\/p>\n
      \n
    • A signature pad isn’t magic.<\/li>\n
    • At its most basic level, we’re simply drawing on a canvas.<\/li>\n
    • The canvas gives us image data.<\/li>\n
    • JavaScript gives us a way to capture the user’s input.<\/li>\n
    • toBlob()<\/code> gives us an image we can send over HTTP.<\/li>\n
    • And the server saves it.<\/li>\n<\/ul>\n
      Once you understand those pieces, you can build something much more sophisticated on top of them.<\/p>\n
      What’s Next?<\/h2>\n
      This example deliberately keeps things simple.<\/p>\n
      There are several things I would change or improve for a more modern implementation, including using Pointer Events instead of maintaining separate mouse and touch event handlers, handling high-DPI displays, improving the drawing algorithm, adding better server-side validation, and potentially storing signatures in a database or object storage system instead of directly on the web server.<\/p>\n
      Those are topics for another article.<\/p>\n
      For now, this is enough to demonstrate the basic idea:<\/p>\n
      Draw it. Convert it. Upload it. Save it.<\/strong><\/pre>\n
      And no, you don’t necessarily need to pay somebody a fortune just to put a box on a web page where someone can draw their name.<\/p>\n","protected":false},"excerpt":{"rendered":"
      A friend recently asked me if creating a signature pad directly in a web page was difficult. His company needed something that would allow a user to sign a document or form electronically, and they were considering asking their existing consultant to build it. I told him it wasn’t particularly difficult. He asked how I […]<\/p>\n","protected":false},"author":1,"featured_media":241,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,7],"tags":[96,19,94,76,95],"class_list":["post-230","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripts","category-webdev","tag-html5-canvas","tag-javascript","tag-php","tag-python","tag-signature-pad"],"yoast_head":"\nCreating a Simple Web-Based Signature Pad with HTML5 Canvas - Tony's Programming Blog and Development Journal<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Simple Web-Based Signature Pad with HTML5 Canvas - Tony's Programming Blog and Development Journal\" \/>\n<meta property=\"og:description\" content=\"A friend recently asked me if creating a signature pad directly in a web page was difficult. His company needed something that would allow a user to sign a document or form electronically, and they were considering asking their existing consultant to build it. I told him it wasn’t particularly difficult. He asked how I […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/\" \/>\n<meta property=\"og:site_name\" content=\"Tony's Programming Blog and Development Journal\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-03T17:21:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-03T18:10:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tonybhimani.com\/programming-blog\/wp-content\/uploads\/2026\/10\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1376\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tony\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TonyBhimani\" \/>\n<meta name=\"twitter:site\" content=\"@TonyBhimani\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tony\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/\"},\"author\":{\"name\":\"Tony\",\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/#\\\/schema\\\/person\\\/036db10e4bc2069453a60f580f91ab88\"},\"headline\":\"Creating a Simple Web-Based Signature Pad with HTML5 Canvas\",\"datePublished\":\"2026-10-03T17:21:47+00:00\",\"dateModified\":\"2026-10-03T18:10:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/\"},\"wordCount\":1837,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/#\\\/schema\\\/person\\\/036db10e4bc2069453a60f580f91ab88\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg\",\"keywords\":[\"html5 canvas\",\"javascript\",\"php\",\"python\",\"signature pad\"],\"articleSection\":[\"Scripts\",\"Web Dev\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/\",\"url\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/\",\"name\":\"Creating a Simple Web-Based Signature Pad with HTML5 Canvas - Tony's Programming Blog and Development Journal\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg\",\"datePublished\":\"2026-10-03T17:21:47+00:00\",\"dateModified\":\"2026-10-03T18:10:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg\",\"width\":1376,\"height\":768,\"caption\":\"HTML5 Canvas Signature Pad\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/creating-a-simple-web-based-signature-pad-with-html5-canvas\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Simple Web-Based Signature Pad with HTML5 Canvas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/\",\"name\":\"Tony's Programming Blog and Development Journal\",\"description\":\"Sharing is caring... Especially with code\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/#\\\/schema\\\/person\\\/036db10e4bc2069453a60f580f91ab88\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/#\\\/schema\\\/person\\\/036db10e4bc2069453a60f580f91ab88\",\"name\":\"Tony\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\",\"caption\":\"Tony\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\"},\"sameAs\":[\"https:\\\/\\\/tonybhimani.com\\\/programming-blog\",\"https:\\\/\\\/x.com\\\/TonyBhimani\",\"https:\\\/\\\/www.youtube.com\\\/tonybhimani\"],\"url\":\"https:\\\/\\\/www.tonybhimani.com\\\/programming-blog\\\/author\\\/coding_magik\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a Simple Web-Based Signature Pad with HTML5 Canvas - Tony's Programming Blog and Development Journal","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Simple Web-Based Signature Pad with HTML5 Canvas - Tony's Programming Blog and Development Journal","og_description":"A friend recently asked me if creating a signature pad directly in a web page was difficult. His company needed something that would allow a user to sign a document or form electronically, and they were considering asking their existing consultant to build it. I told him it wasn’t particularly difficult. He asked how I […]","og_url":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/","og_site_name":"Tony's Programming Blog and Development Journal","article_published_time":"2026-10-03T17:21:47+00:00","article_modified_time":"2026-10-03T18:10:47+00:00","og_image":[{"width":1376,"height":768,"url":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-content\/uploads\/2026\/10\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg","type":"image\/jpeg"}],"author":"Tony","twitter_card":"summary_large_image","twitter_creator":"@TonyBhimani","twitter_site":"@TonyBhimani","twitter_misc":{"Written by":"Tony","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/#article","isPartOf":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/"},"author":{"name":"Tony","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88"},"headline":"Creating a Simple Web-Based Signature Pad with HTML5 Canvas","datePublished":"2026-10-03T17:21:47+00:00","dateModified":"2026-10-03T18:10:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/"},"wordCount":1837,"commentCount":0,"publisher":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88"},"image":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-content\/uploads\/2026\/10\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg","keywords":["html5 canvas","javascript","php","python","signature pad"],"articleSection":["Scripts","Web Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/","url":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/","name":"Creating a Simple Web-Based Signature Pad with HTML5 Canvas - Tony's Programming Blog and Development Journal","isPartOf":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/#primaryimage"},"image":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-content\/uploads\/2026\/10\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg","datePublished":"2026-10-03T17:21:47+00:00","dateModified":"2026-10-03T18:10:47+00:00","breadcrumb":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/#primaryimage","url":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-content\/uploads\/2026\/10\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg","contentUrl":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-content\/uploads\/2026\/10\/Html5CanvasSignaturePadFeatured_20261003083909705.jpg","width":1376,"height":768,"caption":"HTML5 Canvas Signature Pad"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/creating-a-simple-web-based-signature-pad-with-html5-canvas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tonybhimani.com\/programming-blog\/"},{"@type":"ListItem","position":2,"name":"Creating a Simple Web-Based Signature Pad with HTML5 Canvas"}]},{"@type":"WebSite","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#website","url":"https:\/\/www.tonybhimani.com\/programming-blog\/","name":"Tony's Programming Blog and Development Journal","description":"Sharing is caring... Especially with code","publisher":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tonybhimani.com\/programming-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88","name":"Tony","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g","caption":"Tony"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g"},"sameAs":["https:\/\/tonybhimani.com\/programming-blog","https:\/\/x.com\/TonyBhimani","https:\/\/www.youtube.com\/tonybhimani"],"url":"https:\/\/www.tonybhimani.com\/programming-blog\/author\/coding_magik\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":64,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts\/230\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts\/230\/revisions\/300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/media\/241"}],"wp:attachment":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/tags?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}