{"id":23,"date":"2022-02-05T22:25:53","date_gmt":"2022-02-05T22:25:53","guid":{"rendered":"https:\/\/kourentzes.com\/konstantinos\/?p=23"},"modified":"2022-02-05T22:25:53","modified_gmt":"2022-02-05T22:25:53","slug":"capture-signature","status":"publish","type":"post","link":"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/","title":{"rendered":"Capture Signature"},"content":{"rendered":"
\n
function<\/span> signatureCapture<\/span>()<\/span> {<\/span>\n  var<\/span> canvas <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>\"newSignature\"<\/span>);<\/span>\n  var<\/span> context <\/span>=<\/span> canvas<\/span>.<\/span>getContext<\/span>(<\/span>\"2d\"<\/span>);<\/span>\n  canvas<\/span>.<\/span>width <\/span>=<\/span> 276<\/span>;<\/span>\n  canvas<\/span>.<\/span>height <\/span>=<\/span> 180<\/span>;<\/span>\n  context<\/span>.<\/span>fillStyle <\/span>=<\/span> \"#fff\"<\/span>;<\/span>\n  context<\/span>.<\/span>strokeStyle <\/span>=<\/span> \"#444\"<\/span>;<\/span>\n  context<\/span>.<\/span>lineWidth <\/span>=<\/span> 1.5<\/span>;<\/span>\n  context<\/span>.<\/span>lineCap <\/span>=<\/span> \"round\"<\/span>;<\/span>\n  context<\/span>.<\/span>fillRect<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> canvas<\/span>.<\/span>width<\/span>,<\/span> canvas<\/span>.<\/span>height<\/span>);<\/span>\n  var<\/span> disableSave <\/span>=<\/span> true<\/span>;<\/span>\n  var<\/span> pixels <\/span>=<\/span> [];<\/span>\n  var<\/span> cpixels <\/span>=<\/span> [];<\/span>\n  var<\/span> xyLast <\/span>=<\/span> {};<\/span>\n  var<\/span> xyAddLast <\/span>=<\/span> {};<\/span>\n  var<\/span> calculate <\/span>=<\/span> false<\/span>;<\/span>\n  {<\/span>   \/\/functions<\/span>\n    function<\/span> remove_event_listeners<\/span>()<\/span> {<\/span>\n      canvas<\/span>.<\/span>removeEventListener<\/span>(<\/span>'mousemove'<\/span>,<\/span> on_mousemove<\/span>,<\/span> false<\/span>);<\/span>\n      canvas<\/span>.<\/span>removeEventListener<\/span>(<\/span>'mouseup'<\/span>,<\/span> on_mouseup<\/span>,<\/span> false<\/span>);<\/span>\n      canvas<\/span>.<\/span>removeEventListener<\/span>(<\/span>'touchmove'<\/span>,<\/span> on_mousemove<\/span>,<\/span> false<\/span>);<\/span>\n      canvas<\/span>.<\/span>removeEventListener<\/span>(<\/span>'touchend'<\/span>,<\/span> on_mouseup<\/span>,<\/span> false<\/span>);<\/span>\n\n      document<\/span>.<\/span>body<\/span>.<\/span>removeEventListener<\/span>(<\/span>'mouseup'<\/span>,<\/span> on_mouseup<\/span>,<\/span> false<\/span>);<\/span>\n      document<\/span>.<\/span>body<\/span>.<\/span>removeEventListener<\/span>(<\/span>'touchend'<\/span>,<\/span> on_mouseup<\/span>,<\/span> false<\/span>);<\/span>\n    }<\/span>\n\n    function<\/span> get_coords<\/span>(<\/span>e<\/span>)<\/span> {<\/span>\n      var<\/span> x<\/span>,<\/span> y<\/span>;<\/span>\n\n      if<\/span> (<\/span>e<\/span>.<\/span>changedTouches <\/span>&&<\/span> e<\/span>.<\/span>changedTouches<\/span>[<\/span>0<\/span>])<\/span> {<\/span>\n        var<\/span> offsety <\/span>=<\/span> canvas<\/span>.<\/span>offsetTop <\/span>||<\/span> 0<\/span>;<\/span>\n        var<\/span> offsetx <\/span>=<\/span> canvas<\/span>.<\/span>offsetLeft <\/span>||<\/span> 0<\/span>;<\/span>\n\n        x <\/span>=<\/span> e<\/span>.<\/span>changedTouches<\/span>[<\/span>0<\/span>].<\/span>pageX <\/span>-<\/span> offsetx<\/span>;<\/span>\n        y <\/span>=<\/span> e<\/span>.<\/span>changedTouches<\/span>[<\/span>0<\/span>].<\/span>pageY <\/span>-<\/span> offsety<\/span>;<\/span>\n      }<\/span> else<\/span> if<\/span> (<\/span>e<\/span>.<\/span>layerX <\/span>||<\/span> 0<\/span> ==<\/span> e<\/span>.<\/span>layerX<\/span>)<\/span> {<\/span>\n        x <\/span>=<\/span> e<\/span>.<\/span>layerX<\/span>;<\/span>\n        y <\/span>=<\/span> e<\/span>.<\/span>layerY<\/span>;<\/span>\n      }<\/span> else<\/span> if<\/span> (<\/span>e<\/span>.<\/span>offsetX <\/span>||<\/span> 0<\/span> ==<\/span> e<\/span>.<\/span>offsetX<\/span>)<\/span> {<\/span>\n        x <\/span>=<\/span> e<\/span>.<\/span>offsetX<\/span>;<\/span>\n        y <\/span>=<\/span> e<\/span>.<\/span>offsetY<\/span>;<\/span>\n      }<\/span>\n\n      return<\/span> {<\/span>\n        x <\/span>:<\/span> x<\/span>,<\/span> y <\/span>:<\/span> y\n      <\/span>};<\/span>\n    };<\/span>\n\n    function<\/span> on_mousedown<\/span>(<\/span>e<\/span>)<\/span> {<\/span>\n      e<\/span>.<\/span>preventDefault<\/span>();<\/span>\n      e<\/span>.<\/span>stopPropagation<\/span>();<\/span>\n\n      canvas<\/span>.<\/span>addEventListener<\/span>(<\/span>'mouseup'<\/span>,<\/span> on_mouseup<\/span>,<\/span> false<\/span>);<\/span>\n      canvas<\/span>.<\/span>addEventListener<\/span>(<\/span>'mousemove'<\/span>,<\/span> on_mousemove<\/span>,<\/span> false<\/span>);<\/span>\n      canvas<\/span>.<\/span>addEventListener<\/span>(<\/span>'touchend'<\/span>,<\/span> on_mouseup<\/span>,<\/span> false<\/span>);<\/span>\n      canvas<\/span>.<\/span>addEventListener<\/span>(<\/span>'touchmove'<\/span>,<\/span> on_mousemove<\/span>,<\/span> false<\/span>);<\/span>\n      document<\/span>.<\/span>body<\/span>.<\/span>addEventListener<\/span>(<\/span>'mouseup'<\/span>,<\/span> on_mouseup<\/span>,<\/span> false<\/span>);<\/span>\n      document<\/span>.<\/span>body<\/span>.<\/span>addEventListener<\/span>(<\/span>'touchend'<\/span>,<\/span> on_mouseup<\/span>,<\/span> false<\/span>);<\/span>\n\n      empty <\/span>=<\/span> false<\/span>;<\/span>\n      var<\/span> xy <\/span>=<\/span> get_coords<\/span>(<\/span>e<\/span>);<\/span>\n      context<\/span>.<\/span>beginPath<\/span>();<\/span>\n      pixels<\/span>.<\/span>push<\/span>(<\/span>'moveStart'<\/span>);<\/span>\n      context<\/span>.<\/span>moveTo<\/span>(<\/span>xy<\/span>.<\/span>x<\/span>,<\/span> xy<\/span>.<\/span>y<\/span>);<\/span>\n      pixels<\/span>.<\/span>push<\/span>(<\/span>xy<\/span>.<\/span>x<\/span>,<\/span> xy<\/span>.<\/span>y<\/span>);<\/span>\n      xyLast <\/span>=<\/span> xy<\/span>;<\/span>\n    };<\/span>\n\n    function<\/span> on_mousemove<\/span>(<\/span>e<\/span>,<\/span> finish<\/span>)<\/span> {<\/span>\n      e<\/span>.<\/span>preventDefault<\/span>();<\/span>\n      e<\/span>.<\/span>stopPropagation<\/span>();<\/span>\n\n      var<\/span> xy <\/span>=<\/span> get_coords<\/span>(<\/span>e<\/span>);<\/span>\n      var<\/span> xyAdd <\/span>=<\/span> {<\/span>\n        x <\/span>:<\/span> (<\/span>xyLast<\/span>.<\/span>x <\/span>+<\/span> xy<\/span>.<\/span>x<\/span>)<\/span> \/<\/span> 2<\/span>,<\/span>\n        y <\/span>:<\/span> (<\/span>xyLast<\/span>.<\/span>y <\/span>+<\/span> xy<\/span>.<\/span>y<\/span>)<\/span> \/<\/span> 2<\/span>\n      };<\/span>\n\n      if<\/span> (<\/span>calculate<\/span>)<\/span> {<\/span>\n        var<\/span> xLast <\/span>=<\/span> (<\/span>xyAddLast<\/span>.<\/span>x <\/span>+<\/span> xyLast<\/span>.<\/span>x <\/span>+<\/span> xyAdd<\/span>.<\/span>x<\/span>)<\/span> \/<\/span> 3<\/span>;<\/span>\n        var<\/span> yLast <\/span>=<\/span> (<\/span>xyAddLast<\/span>.<\/span>y <\/span>+<\/span> xyLast<\/span>.<\/span>y <\/span>+<\/span> xyAdd<\/span>.<\/span>y<\/span>)<\/span> \/<\/span> 3<\/span>;<\/span>\n        pixels<\/span>.<\/span>push<\/span>(<\/span>xLast<\/span>,<\/span> yLast<\/span>);<\/span>\n      }<\/span> else<\/span> {<\/span>\n        calculate <\/span>=<\/span> true<\/span>;<\/span>\n      }<\/span>\n\n      context<\/span>.<\/span>quadraticCurveTo<\/span>(<\/span>xyLast<\/span>.<\/span>x<\/span>,<\/span> xyLast<\/span>.<\/span>y<\/span>,<\/span> xyAdd<\/span>.<\/span>x<\/span>,<\/span> xyAdd<\/span>.<\/span>y<\/span>);<\/span>\n      pixels<\/span>.<\/span>push<\/span>(<\/span>xyAdd<\/span>.<\/span>x<\/span>,<\/span> xyAdd<\/span>.<\/span>y<\/span>);<\/span>\n      context<\/span>.<\/span>stroke<\/span>();<\/span>\n      context<\/span>.<\/span>beginPath<\/span>();<\/span>\n      context<\/span>.<\/span>moveTo<\/span>(<\/span>xyAdd<\/span>.<\/span>x<\/span>,<\/span> xyAdd<\/span>.<\/span>y<\/span>);<\/span>\n      xyAddLast <\/span>=<\/span> xyAdd<\/span>;<\/span>\n      xyLast <\/span>=<\/span> xy<\/span>;<\/span>\n\n    };<\/span>\n\n    function<\/span> on_mouseup<\/span>(<\/span>e<\/span>)<\/span> {<\/span>\n      remove_event_listeners<\/span>();<\/span>\n      disableSave <\/span>=<\/span> false<\/span>;<\/span>\n      context<\/span>.<\/span>stroke<\/span>();<\/span>\n      pixels<\/span>.<\/span>push<\/span>(<\/span>'e'<\/span>);<\/span>\n      calculate <\/span>=<\/span> false<\/span>;<\/span>\n    };<\/span>\n  }<\/span>\n  canvas<\/span>.<\/span>addEventListener<\/span>(<\/span>'touchstart'<\/span>,<\/span> on_mousedown<\/span>,<\/span> false<\/span>);<\/span>\n  canvas<\/span>.<\/span>addEventListener<\/span>(<\/span>'mousedown'<\/span>,<\/span> on_mousedown<\/span>,<\/span> false<\/span>);<\/span>\n}<\/span>\n\nfunction<\/span> signatureSave<\/span>()<\/span> {<\/span>\n  var<\/span> canvas <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>\"newSignature\"<\/span>);<\/span>\/\/ save canvas image as data url (png format by default)<\/span>\n  var<\/span> dataURL <\/span>=<\/span> canvas<\/span>.<\/span>toDataURL<\/span>(<\/span>\"image\/png\"<\/span>);<\/span>\n  document<\/span>.<\/span>getElementById<\/span>(<\/span>\"saveSignature\"<\/span>).<\/span>src <\/span>=<\/span> dataURL<\/span>;<\/span>\n};<\/span>\n\nfunction<\/span> signatureClear<\/span>()<\/span> {<\/span>\n  var<\/span> canvas <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>\"newSignature\"<\/span>);<\/span>\n  var<\/span> context <\/span>=<\/span> canvas<\/span>.<\/span>getContext<\/span>(<\/span>\"2d\"<\/span>);<\/span>\n  context<\/span>.<\/span>clearRect<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> canvas<\/span>.<\/span>width<\/span>,<\/span> canvas<\/span>.<\/span>height<\/span>);<\/span>\n}<\/span><\/pre>\n<\/blockquote>\n
\n
<!DOCTYPE html><\/span>\n<html><\/span>\n  <head><\/span>\n    <meta<\/span> http-equiv<\/span>=<\/span>\"Content-Type\"<\/span> content<\/span>=<\/span>\"text\/html; charset=UTF-8\"<\/span>><\/span>\n    <script<\/span> src<\/span>=<\/span>\"todataurl.js\"<\/span>><\/script><\/span>\n    <script<\/span> src<\/span>=<\/span>\"signature.js\"<\/span>><\/script><\/span>\n  <\/head><\/span>\n  <body><\/span>\n    <div<\/span> id<\/span>=<\/span>\"canvas\"<\/span>><\/span>\n      <canvas<\/span> class<\/span>=<\/span>\"roundCorners\"<\/span> id<\/span>=<\/span>\"newSignature\"<\/span>\n      style<\/span>=<\/span>\"<\/span>position<\/span>:<\/span> relative<\/span>;<\/span> margin<\/span>:<\/span> 0<\/span>;<\/span> padding<\/span>:<\/span> 0<\/span>;<\/span> border<\/span>:<\/span> 1px<\/span> solid <\/span>#c4caac;<\/span>\"<\/span>><\/canvas><\/span>\n    <\/div><\/span>\n    <script><\/span>signatureCapture<\/span>();<\/span><\/script><\/span>\n    <button<\/span> type<\/span>=<\/span>\"button\"<\/span> onclick<\/span>=<\/span>\"<\/span>signatureSave<\/span>()<\/span>\"<\/span>><\/span>Save signature<\/span><\/button><\/span>\n    <button<\/span> type<\/span>=<\/span>\"button\"<\/span> onclick<\/span>=<\/span>\"<\/span>signatureClear<\/span>()<\/span>\"<\/span>><\/span>Clear signature<\/span><\/button><\/span>\n    <\/br><\/span>\n    Saved Image\n    <\/span><\/br><\/span>\n    <img<\/span> id<\/span>=<\/span>\"saveSignature\"<\/span> alt<\/span>=<\/span>\"Saved image png\"<\/span>\/><\/span>\n  <\/body><\/span>\n<\/html><\/span><\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
function signatureCapture() { var canvas = document.getElementById(“newSignature”); var context = canvas.getContext(“2d”); canvas.width = 276; canvas.height = 180; context.fillStyle = “#fff”; context.strokeStyle = “#444”; context.lineWidth = 1.5; context.lineCap = “round”; context.fillRect(0, 0, canvas.width, canvas.height); var disableSave = true; var pixels = []; var cpixels = []; var xyLast = {}; var xyAddLast = {}; var calculate…<\/p>\n
Read More “Capture Signature”<\/span> »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[10],"tags":[17,21,20,19],"class_list":["post-23","post","type-post","status-publish","format-standard","hentry","category-code-snipperts","tag-capture-signature","tag-html","tag-javascript","tag-js"],"yoast_head":"\nCapture Signature - konstantinos.kourentzes.com<\/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:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Capture Signature - konstantinos.kourentzes.com\" \/>\n<meta property=\"og:description\" content=\"function signatureCapture() { var canvas = document.getElementById("newSignature"); var context = canvas.getContext("2d"); canvas.width = 276; canvas.height = 180; context.fillStyle = "#fff"; context.strokeStyle = "#444"; context.lineWidth = 1.5; context.lineCap = "round"; context.fillRect(0, 0, canvas.width, canvas.height); var disableSave = true; var pixels = []; var cpixels = []; var xyLast = {}; var xyAddLast = {}; var calculate...Read More “Capture Signature” »\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/\" \/>\n<meta property=\"og:site_name\" content=\"konstantinos.kourentzes.com\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-05T22:25:53+00:00\" \/>\n<meta name=\"author\" content=\"Konstantinos Kourentzes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kkourentzes\" \/>\n<meta name=\"twitter:site\" content=\"@kkourentzes\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Konstantinos Kourentzes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/index.php\\\/2022\\\/02\\\/05\\\/capture-signature\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/index.php\\\/2022\\\/02\\\/05\\\/capture-signature\\\/\"},\"author\":{\"name\":\"Konstantinos Kourentzes\",\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/#\\\/schema\\\/person\\\/2693fb0ad7f7638a020431ffe372c822\"},\"headline\":\"Capture Signature\",\"datePublished\":\"2022-02-05T22:25:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/index.php\\\/2022\\\/02\\\/05\\\/capture-signature\\\/\"},\"wordCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/#\\\/schema\\\/person\\\/2693fb0ad7f7638a020431ffe372c822\"},\"keywords\":[\"capture signature\",\"HTML\",\"javascript\",\"JS\"],\"articleSection\":[\"Code Snippets\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/index.php\\\/2022\\\/02\\\/05\\\/capture-signature\\\/\",\"url\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/index.php\\\/2022\\\/02\\\/05\\\/capture-signature\\\/\",\"name\":\"Capture Signature - konstantinos.kourentzes.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/#website\"},\"datePublished\":\"2022-02-05T22:25:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/index.php\\\/2022\\\/02\\\/05\\\/capture-signature\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/index.php\\\/2022\\\/02\\\/05\\\/capture-signature\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/index.php\\\/2022\\\/02\\\/05\\\/capture-signature\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Capture Signature\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/#website\",\"url\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/\",\"name\":\"kourentzes.com\\\/konstantinos\",\"description\":\"Konstantinos Kourentzes\",\"publisher\":{\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/#\\\/schema\\\/person\\\/2693fb0ad7f7638a020431ffe372c822\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/#\\\/schema\\\/person\\\/2693fb0ad7f7638a020431ffe372c822\",\"name\":\"Konstantinos Kourentzes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/kko.png\",\"url\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/kko.png\",\"contentUrl\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/kko.png\",\"width\":2835,\"height\":2268,\"caption\":\"Konstantinos Kourentzes\"},\"logo\":{\"@id\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/kko.png\"},\"description\":\"Konstantinos Kourentzes is a distinguished technologist and Enterprise Resource Planning (ERP) consultant renowned for his expertise in delivering cutting-edge technology solutions. Based in Marousi, Greece, he has a knack for seamlessly integrating data-driven systems, empowering businesses to streamline their operations and achieve peak efficiency. A fervent proponent of innovation, Konstantinos is committed to instigating revolutionary shifts within organizations. His approach revolves around delivering custom-tailored ERP solutions that seamlessly align with each business's distinctive requirements. This catalyzes enduring collaborations rooted in unwavering trust and tangible outcomes. With a background rooted in technology and a passion for optimizing business processes, Konstantinos is your go-to partner for harnessing the power of ERP systems to unlock operational excellence. Connect with Konstantinos on LinkedIn to explore how his technological insights can drive your business to new heights.\",\"sameAs\":[\"https:\\\/\\\/kourentzes.com\\\/konstantinos\",\"https:\\\/\\\/x.com\\\/kkourentzes\"],\"url\":\"https:\\\/\\\/kourentzes.com\\\/konstantinos\\\/index.php\\\/author\\\/administrator\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Capture Signature - konstantinos.kourentzes.com","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:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/","og_locale":"en_US","og_type":"article","og_title":"Capture Signature - konstantinos.kourentzes.com","og_description":"function signatureCapture() { var canvas = document.getElementById(\"newSignature\"); var context = canvas.getContext(\"2d\"); canvas.width = 276; canvas.height = 180; context.fillStyle = \"#fff\"; context.strokeStyle = \"#444\"; context.lineWidth = 1.5; context.lineCap = \"round\"; context.fillRect(0, 0, canvas.width, canvas.height); var disableSave = true; var pixels = []; var cpixels = []; var xyLast = {}; var xyAddLast = {}; var calculate...Read More “Capture Signature” »","og_url":"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/","og_site_name":"konstantinos.kourentzes.com","article_published_time":"2022-02-05T22:25:53+00:00","author":"Konstantinos Kourentzes","twitter_card":"summary_large_image","twitter_creator":"@kkourentzes","twitter_site":"@kkourentzes","twitter_misc":{"Written by":"Konstantinos Kourentzes","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/#article","isPartOf":{"@id":"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/"},"author":{"name":"Konstantinos Kourentzes","@id":"https:\/\/kourentzes.com\/konstantinos\/#\/schema\/person\/2693fb0ad7f7638a020431ffe372c822"},"headline":"Capture Signature","datePublished":"2022-02-05T22:25:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/"},"wordCount":2,"publisher":{"@id":"https:\/\/kourentzes.com\/konstantinos\/#\/schema\/person\/2693fb0ad7f7638a020431ffe372c822"},"keywords":["capture signature","HTML","javascript","JS"],"articleSection":["Code Snippets"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/","url":"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/","name":"Capture Signature - konstantinos.kourentzes.com","isPartOf":{"@id":"https:\/\/kourentzes.com\/konstantinos\/#website"},"datePublished":"2022-02-05T22:25:53+00:00","breadcrumb":{"@id":"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kourentzes.com\/konstantinos\/index.php\/2022\/02\/05\/capture-signature\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kourentzes.com\/konstantinos\/"},{"@type":"ListItem","position":2,"name":"Capture Signature"}]},{"@type":"WebSite","@id":"https:\/\/kourentzes.com\/konstantinos\/#website","url":"https:\/\/kourentzes.com\/konstantinos\/","name":"kourentzes.com\/konstantinos","description":"Konstantinos Kourentzes","publisher":{"@id":"https:\/\/kourentzes.com\/konstantinos\/#\/schema\/person\/2693fb0ad7f7638a020431ffe372c822"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kourentzes.com\/konstantinos\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/kourentzes.com\/konstantinos\/#\/schema\/person\/2693fb0ad7f7638a020431ffe372c822","name":"Konstantinos Kourentzes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kourentzes.com\/konstantinos\/wp-content\/uploads\/2022\/02\/kko.png","url":"https:\/\/kourentzes.com\/konstantinos\/wp-content\/uploads\/2022\/02\/kko.png","contentUrl":"https:\/\/kourentzes.com\/konstantinos\/wp-content\/uploads\/2022\/02\/kko.png","width":2835,"height":2268,"caption":"Konstantinos Kourentzes"},"logo":{"@id":"https:\/\/kourentzes.com\/konstantinos\/wp-content\/uploads\/2022\/02\/kko.png"},"description":"Konstantinos Kourentzes is a distinguished technologist and Enterprise Resource Planning (ERP) consultant renowned for his expertise in delivering cutting-edge technology solutions. Based in Marousi, Greece, he has a knack for seamlessly integrating data-driven systems, empowering businesses to streamline their operations and achieve peak efficiency. A fervent proponent of innovation, Konstantinos is committed to instigating revolutionary shifts within organizations. His approach revolves around delivering custom-tailored ERP solutions that seamlessly align with each business's distinctive requirements. This catalyzes enduring collaborations rooted in unwavering trust and tangible outcomes. With a background rooted in technology and a passion for optimizing business processes, Konstantinos is your go-to partner for harnessing the power of ERP systems to unlock operational excellence. Connect with Konstantinos on LinkedIn to explore how his technological insights can drive your business to new heights.","sameAs":["https:\/\/kourentzes.com\/konstantinos","https:\/\/x.com\/kkourentzes"],"url":"https:\/\/kourentzes.com\/konstantinos\/index.php\/author\/administrator\/"}]}},"_links":{"self":[{"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/posts\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":1,"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/posts\/23\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/posts\/23\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/categories?post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kourentzes.com\/konstantinos\/index.php\/wp-json\/wp\/v2\/tags?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}