{"id":60506,"date":"2023-08-21T03:01:36","date_gmt":"2023-08-20T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60506"},"modified":"2023-08-21T14:59:49","modified_gmt":"2023-08-21T04:59:49","slug":"canvas-via-image-web-share-api-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-via-image-web-share-api-tutorial\/","title":{"rendered":"Canvas via Image Web Share API Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Canvas via Image Web Share API Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_web_share_api.gif\" title=\"Canvas via Image Web Share API Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Canvas via Imge Web Share API Tutorial<\/p><\/div>\n<p>We&#8217;re on the lookout for ways to improve the sharing and collaboration functionality of yesterday&#8217;s <a title='Images to Canvas No Clicking Form Signature Tutorial' href='#icncfst'>Images to Canvas No Clicking Form Signature Tutorial<\/a>&#8216;s &#8220;User of Signature&#8221; canvas using web application.  We&#8217;re calling on ..<\/p>\n<ul>\n<li>Safari and Google Chrome web browser(s) &#8230; for the moment, supporting the &#8230;<\/li>\n<li><a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>Web Share API<\/a> &#8230; in order to &#8230;<\/li>\n<li>Fill out email (or other communication idea) attachment links or documents &#8230; that &#8230;<\/li>\n<li>Prepare the message before you, the user, flesh out the message as you send it off to the recipient<\/li>\n<\/ul>\n<p> &#8230; a more guaranteed way, these days, because there are more and more ways restrictions may stop you doing similar functionality with a mail server arrangement on your public domain website, where we use the <a target=_blank title='Exim' href='https:\/\/www.exim.org\/'>Exim<\/a> mail server, at the RJM Programming domain.<\/p>\n<p>As far as data goes for this, we also call on <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php------------------GETME' title='signature_signature.php'>our changed<\/a> PHP helper <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php------------------GETME' title='signature_signature.php'>signature_signature.php<\/a> to create a webp image file for sharing &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_POST['webpit'])) {<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'canvas.webp', base64_decode(explode(\";base64,\", str_replace(' ','+',urldecode($_POST['webpit'])))[1]));<br \/>\n    exit;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; as applicable.  The modus operandi for this back at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/web_share_api_test.js----GETME\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/web_share_api_test.js----GETME\">web_share_api_test.js<\/a> external Javascript Web Share API specialist, uses <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a> methodologies &#8230;<\/p>\n<p><code><br \/>\n var canvc=' ', lastcanvc=' ', czhr=null, czform=null;<br \/>\n<br \/>\n function cstateChanged() {<br \/>\n  if (czhr.readyState == 4) {<br \/>\n   if (czhr.status == 200) {<br \/>\n       if (1 == 2) { alert('Did it'); }<br \/>\n       if (document.getElementById('shareurl')) {<br \/>\n          document.getElementById('shareurl').style.backgroundColor='yellow';<br \/>\n       }<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n<br \/>\nfunction tctowebp() {<br \/>\n   var ourcanvc='';<br \/>\n   var canvs=[];<br \/>\n   if (window.top) {<br \/>\n     canvs=top.document.getElementsByTagName('canvas');<br \/>\n   }<br \/>\n   if (eval('' + canvs.length) == 0 && window.parent) {<br \/>\n      canvs=parent.document.getElementsByTagName('canvas');<br \/>\n   }<br \/>\n   if (eval('' + canvs.length) == 0) {<br \/>\n     canvs=document.getElementsByTagName('canvas');<br \/>\n   }<br \/>\n   if (eval('' + canvs.length) == 0 && window.parent) {<br \/>\n      canvs=parent.document.getElementsByTagName('canvas');<br \/>\n      if (eval('' + canvs.length) == 0 && window.top) {<br \/>\n        canvs=top.document.getElementsByTagName('canvas');<br \/>\n      }<br \/>\n   }<br \/>\n   if (eval('' + canvs.length) > 0) {<br \/>\n      ourcanvc=canvs[0].toDataURL('image\/webp');<br \/>\n      if (lastcanvc != ' ') {<br \/>\n        if (lastcanvc != ourcanvc) {<br \/>\n          lastcanvc=ourcanvc;<br \/>\n          canvc=ourcanvc;<br \/>\n          czhr = new XMLHttpRequest();<br \/>\n          czform = new FormData();<br \/>\n          czform.append('webpit', canvc);<br \/>\n          czhr.onreadystatechange=cstateChanged;<br \/>\n          czhr.open('post', '.\/signature_signature.php', true);<br \/>\n          czhr.send(czform);<br \/>\n        } else {<br \/>\n       if (document.getElementById('shareurl')) {<br \/>\n          document.getElementById('shareurl').style.backgroundColor='#f9f9f9';<br \/>\n       }<br \/>\n        }<br \/>\n      }<br \/>\n      lastcanvc=ourcanvc;<br \/>\n   }<br \/>\n   return ourcanvc;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and set in motion via a couple of different parent<sub>al<\/sub> calls such as &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript' src='\/web_share_api_test.js?canvasshare=as_necessary9876' defer&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; in &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html-----------------GETME\" title=\"user_of_signature_signature.html\">our HTML changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html-----------------GETME\" title=\"user_of_signature_signature.html\">user_of_signature_signature.html<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\" title=\"Click picture\">User of Signature Signature (standalone) live run<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html---------------GETME\" title=\"signature_signature.html\">our HTML changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html---------------GETME\" title=\"signature_signature.html\">user_of_signature_signature.html<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html\" title=\"Click picture\">Signature Signature (standalone) live run<\/a><\/li>\n<\/ul>\n<p> &#8230; for cuter Safari and Google Chrome web browser sharing and collaboration work.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas--via-image-web-share-api-tutorial\/'>Canvas via Image Web Share API Tutorial<\/a>.<\/p-->\n<hr>\n<p id='icncfst'>Previous relevant <a target=_blank title='Images to Canvas No Clicking Form Signature Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/images-to-canvas-no-clicking-form-signature-tutorial\/'>Images to Canvas No Clicking Form Signature Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Images to Canvas No Clicking Form Signature Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_image_to_canvas_no_clicking.gif\" title=\"Images to Canvas No Clicking Form Signature Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Images to Canvas No Clicking Form Signature Tutorial<\/p><\/div>\n<p>Surprisingly, it&#8217;s been more than a year since we changed anything to do with our &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> based &#8230;<\/li>\n<li>images and annotation &#8230; accepting &#8230;<\/li>\n<li>scribble (ie. can handle signatures) &#8230; perhaps &#8230;<\/li>\n<li>form filling helping web application<\/li>\n<\/ul>\n<p> &#8230; (when we presented <a title='Canvas Graphics Editing in Zoomed Webpage Tutorial' href='#cgezwt'>Canvas Graphics Editing in Zoomed Webpage Tutorial<\/a>) and we found that in order to add six more such Annotation option helpers into the mix &#8230;<\/p>\n<table>\n<tr>\n<th>Image Input Mode<\/th>\n<th>Image Sizing Modus Operandi<\/th>\n<\/tr>\n<tr>\n<td rowspan=3>URL<\/td>\n<td>Actual (canvas resized to image)<\/td>\n<\/tr>\n<tr>\n<td>Contain (canvas)<\/td>\n<\/tr>\n<tr>\n<td>Cover (canvas)<\/td>\n<\/tr>\n<tr>\n<td rowspan=3>Browsing<\/td>\n<td>Actual (canvas resized to image)<\/td>\n<\/tr>\n<tr>\n<td>Contain (canvas)<\/td>\n<\/tr>\n<tr>\n<td>Cover (canvas)<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; we only needed <a target=_blank title='signature_signature.js' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js------------------------------------------GETME'>to change<\/a> the <a target=_blank title='signature_signature.js' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js------------------------------------------GETME'>external Javascript signature_signature.js code<\/a> used by <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\" title=\"Click picture\">our signature use in canvas supervisory web application<\/a> so that when you can not ask so much of the user regarding image scaling, and avoid any canvas clicking that way, offering these six new annotation functionality options.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/images-to-canvas-no-clicking-form-signature-tutorial\/'>Images to Canvas No Clicking Form Signature Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgezwt'>Previous relevant <a target=_blank title='Canvas Graphics Editing in Zoomed Webpage Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas-graphics-editing-in-zoomed-webpage-tutorial\/'>Canvas Graphics Editing in Zoomed Webpage Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Canvas Graphics Editing in Zoomed Webpage Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive_zoom.jpg\" title=\"Canvas Graphics Editing in Zoomed Webpage Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Canvas Graphics Editing in Zoomed Webpage Tutorial<\/p><\/div>\n<p>Software integration can be useful for a number of reasons &#8230;<\/p>\n<ul>\n<li>code reuse<\/li>\n<li>modularisation of functionality &#8230; and in our case &#8230;<\/li>\n<li>if you like coding via &#8220;intervention points&#8221; you will enjoy coding for software integration improvements<\/li>\n<\/ul>\n<p>As you might imagine it is easier in terms of the fact you can change &#8220;both ends&#8221; of the software integration, if it is &#8220;inhouse&#8221;, and luckily, today, our software integration is &#8220;inhouse&#8221;.<\/p>\n<p>When we presented the recent <a title='Keyboard Based Cursor Canvas Content Copy Tutorial' href='#kbcccct'>Keyboard Based Cursor Canvas Content Copy Tutorial<\/a> it focussed our attention on an improvement we could make to that <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" title=\"user_of_signature_signature.htm\">user_of_signature_signature.htm<\/a> canvas image editing web application.  We wanted to offer the software integration with this web application to be able to successfully handle a webpage that has been zoomed to zoom factor different to 1.0 (or 100%).<\/p>\n<p>We noticed before today&#8217;s very <a target=_blank title='signature_signature.js' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js-----------------------------------------GETME'>simple changes<\/a> to <a target=_blank title='signature_signature.js' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js-----------------------------------------GETME'>external Javascript signature_signature.js code<\/a>, graphic positioning on the canvas was wrong when the webpage had a zoom factor that is not 1.<\/p>\n<p>Applying the canvas co-ordinate references through &#8220;the lens of&#8221; Javascript <i>function zmb<\/i> below &#8230;<\/p>\n<p><code><br \/>\nvar zzfac=location.search.split('zoom=')[1] ? decodeURIComponent(location.search.split('zoom=')[1].split('&')[0]) : \"\";<br \/>\nif (('' + location.hash).indexOf('zoom=') != -1) {    zzfac=decodeURIComponent(('' + location.hash).split('zoom=')[1].split(';')[0]);   }<br \/>\n<br \/>\n function zmb(inco) {<br \/>\n   if (zzfac != '') {<br \/>\n     if (zzfac.indexOf('%') != -1) {<br \/>\n       return eval(eval(eval('' + inco) \/ eval('' + zzfac.replace('%', ''))) * 100.0);<br \/>\n     } else {<br \/>\n       return eval(eval('' + inco) \/ eval('' + zzfac));<br \/>\n     }<br \/>\n   }<br \/>\n   return inco;<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=blue>used<\/font> in the following example code below &#8230;<\/p>\n<p><code><br \/>\n    topelem.addEventListener('mousedown', function(event) {<br \/>\n       if (topin) {<br \/>\n         topin.value='- -' + isScribble + ',' + lastx + ',' + lasty + ',' + x + ',' + y;<br \/>\n       }<br \/>\n       if (isScribble == 1) {<br \/>\n          threebackpmore=twobackpmore;  twobackpmore=lastpmore; lastpmore=pmore;   pmore=' pxam1 ';<br \/>\n        isScribble=2;<br \/>\n       if (event.pageX || event.pageY) {<br \/>\n        ppx=<font color=blue>zmb<\/font>(event.pageX) - elemLeft;<br \/>\n        ppy=<font color=blue>zmb<\/font>(event.pageY) - elemTop;<br \/>\n       } else {<br \/>\n        ppx=<font color=blue>zmb<\/font>(event.clientX) - elemLeft;<br \/>\n        ppy=<font color=blue>zmb<\/font>(event.clientY) - elemTop;<br \/>\n       }<br \/>\n       if (pdgebi(topdcmcheck('dcm'))) {<br \/>\n       if (parent.document.getElementById(topdcmcheck('dcm')).value.indexOf('text') == 0) {<br \/>\n       \/\/parent.document.title='here3 ' + tx + ',' + ty;<br \/>\n       if (1 == 2 && tlx &lt; 0 && tly &lt; 0) {<br \/>\n       tlx=ppx;<br \/>\n       tly=ppy;<br \/>\n       }<br \/>\n       if (tx &gt;= 0 && ty &gt;= 0) {<br \/>\n       prevtx=tx;<br \/>\n       prevty=ty;<br \/>\n       trotis=eval(((Math.atan2((ppy - prevty), (ppx - prevtx)) * 180.0 \/ Math.PI) + 360) % 360);<br \/>\n       if (pdgebi('trotation')) {<br \/>\n         if (parent.document.getElementById(topdcmcheck('dcm')).value.indexOf('textseq') == 0) {<br \/>\n         jsrectbits[0]=prevtx;<br \/>\n         jsrectbits[1]=prevty;<br \/>\n         jsrectbits[2]=ppx;<br \/>\n         jsrectbits[3]=ppy;<br \/>\n         if (Math.abs(prevty - ppy) &gt; Math.abs(prevtx - ppx)) {<br \/>\n         trotis=eval(((Math.atan2((prevtx - ppx), (ppy - prevty)) * 180.0 \/ Math.PI) + 360) % 360);<br \/>\n         }<br \/>\n         }<br \/>\n         parent.document.getElementById('trotation').value=Math.floor(trotis);<br \/>\n         ppx=prevtx;<br \/>\n         ppy=prevty;<br \/>\n         prevtx=-1;<br \/>\n         prevty=-1;<br \/>\n         exceptwhen=endtrue(''); \/\/true;<br \/>\n         if (parent.document.getElementById(topdcmcheck('dcm')).value.indexOf('textseq') == -1) parent.document.getElementById(topdcmcheck('dcm')).value = 'Text';<br \/>\n       }<br \/>\n       \/\/alert(trotis);<br \/>\n       }<br \/>\n       tx=ppx;<br \/>\n       ty=ppy;<br \/>\n       } else {<br \/>\n       tx=ppx;<br \/>\n       ty=ppy;<br \/>\n       prevtx=-1;<br \/>\n       prevty=-1;<br \/>\n       }<br \/>\n       } else {<br \/>\n       tx=ppx;<br \/>\n       ty=ppy;<br \/>\n       prevtx=-1;<br \/>\n       prevty=-1;<br \/>\n       }<br \/>\n        lastx=0;  \/\/ new to scribble<br \/>\n        lasty=0;<br \/>\n        x=0;<br \/>\n        y=0;<br \/>\n       }<br \/>\n    });<br \/>\n<\/code><\/p>\n<p> &#8230; we now have reasonable graphic positioning for the canvas when its webpage window has a non 1.0 zoom factor applied.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas-graphics-editing-in-zoomed-webpage-tutorial\/'>Canvas Graphics Editing in Zoomed Webpage Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kbcccct'>Previous relevant <a target=_blank title='Keyboard Based Cursor Canvas Content Copy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-canvas-content-copy-tutorial\/'>Keyboard Based Cursor Canvas Content Copy Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Canvas Content Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive_canvas.jpg\" title=\"Keyboard Based Cursor Canvas Content Copy Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Canvas Content Copy Tutorial<\/p><\/div>\n<p>You may have noticed with yesterday&#8217;s <a title='Keyboard Based Cursor Share Content Copy Tutorial' href='#kbcscct'>Keyboard Based Cursor Share Content Copy Tutorial<\/a>, crucial to the sharing code, was the use of the incredible HTML5 introduced <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element, helped by that middleperson link to those <i>public<\/i> email and SMS sharing conduits, overseeing the great random <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> background images and user created emoji and\/or text initial annotations.<\/p>\n<p>And this got us wondering whether there was a <i>private<\/i> (ie. inhouse) web application of the past that could further value add as another optional middleperson tool for (user) personalization (of the content) purposes.   And yes, do you remember the canvas work involved in the featured web application of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-canvas-annotation-tutorial\/' title='Emoji Borders and Backgrounds Canvas Annotation Tutorial'>Emoji Borders and Backgrounds Canvas Annotation Tutorial<\/a>?<\/p>\n<p>It uses an interesting approach with the transference of data across from a canvas in one application to the canvas in that <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" title=\"user_of_signature_signature.htm\">user_of_signature_signature.htm<\/a> web application.  Once <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html----GETME\" title=\"body_mouse_deepdive.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html----GETME\" title=\"body_mouse_deepdive.html\">body_mouse_deepdive.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\">&#8220;parent&#8221; web application<\/a> has organized its canvas contents, it&#8217;s just a matter of &#8230;<\/p>\n<p><code><br \/>\n  var awo=null;<br \/>\n  awo=<a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a>('.\/user_of_signature_signature.htm','_blank','top=100,left=100,width=800,height=800');<br \/>\n<\/code><\/p>\n<p> for the &#8220;child&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" title=\"user_of_signature_signature.htm\">canvas annotator<\/a> to effectively &#8220;suck up&#8221; the canvas data into its canvas via &#8230;<\/p>\n<p><code><br \/>\nvar cancont='';<br \/>\nvar elemode=location.search.split('elemode=')[1] ? (location.search.split('elemode=')[1].split('&')[0]) : \"canvas\";<br \/>\n<br \/>\nif (('' + <a target=_blank title='window.opener information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_opener.asp'>window.opener<\/a>).replace('null','') != '') {<br \/>\n    var cans=window.opener.document.<a target=_blank title='Javascript DOM getElementsByTagName() method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_getelementsbytagname.asp'>getElementsByTagName<\/a>(elemode);<br \/>\n    if (cans.length &gt; 0) {<br \/>\n      if (elemode == 'img') {<br \/>\n      cancont=cans[0].src;<br \/>\n      } else {<br \/>\n      cancont=cans[0].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>('image\/png');<br \/>\n      }<br \/>\n      if (cancontw < 0 &#038;&#038; canconth < 0) {\n      cancontw=cans[0].width; \n      canconth=cans[0].height; \n      }\n    }\n}\n<\/code><\/p>\n<p> ... possible because both \"parent\" and \"child\" exist on the same RJM Programming domain (web server).<\/p>\n<p>Once there, another woooooorrrrrlllddd of image manipulations, via canvas, can await the user, perhaps ready for ongoing sharing possibilities with that \"child\".<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-canvas-content-copy-tutorial\/'>Keyboard Based Cursor Canvas Content Copy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kbcscct'>Previous relevant <a target=_blank title='Keyboard Based Cursor Share Content Copy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-share-content-copy-tutorial\/'>Keyboard Based Cursor Share Content Copy Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Share Content Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive_share.jpg\" title=\"Keyboard Based Cursor Share Content Copy Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Share Content Copy Tutorial<\/p><\/div>\n<p>Yesterday's <a title='Keyboard Based Cursor Personalized Content Copy Tutorial' href='#kbcpcct'>Keyboard Based Cursor Personalized Content Copy Tutorial<\/a> has probably reached a point where some sharing mechanism is apt, for accountability and usefulness purposes, at the very least, regarding our recent web application allowing for foreground content on top of a random <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> background image.<\/p>\n<p>We've been helped out greatly by <a target=_blank title='javascript - Can I take a screenshot from the clipboard? - Stack Overflow' href='https:\/\/stackoverflow.com\/questions\/55559432\/can-i-take-a-screenshot-from-the-clipboard'>javascript - Can I take a screenshot from the clipboard? - Stack Overflow<\/a> and <a target=_blank title='html - How to render a blob on a canvas element? - Stack Overflow' href='https:\/\/stackoverflow.com\/questions\/38004917\/how-to-render-a-blob-on-a-canvas-element'>html - How to render a blob on a canvas element? - Stack Overflow<\/a> in the following new relevant Javascript code ...<\/p>\n<p><code><br \/>\nfunction renderNoImage(canvas, blob) {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/38004917\/how-to-render-a-blob-on-a-canvas-element<br \/>\n  const ctx = canvas.getContext('2d');<br \/>\n  const img = new Image();<br \/>\n  img.onload = (event) =&gt; {<br \/>\n    URL.revokeObjectURL(event.target.src) \/\/  This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.<br \/>\n    ctx.drawImage(event.target, 0, 0)<br \/>\n  img.style.display='none';<br \/>\n  img.style.zIndex='-123';<br \/>\n  };<br \/>\n  img.src = URL.createObjectURL(blob);<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction renderImage(canvas, blob) {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/38004917\/how-to-render-a-blob-on-a-canvas-element<br \/>\n  const ctx = canvas.getContext('2d');<br \/>\n  const img = new Image();<br \/>\n  img.onload = (event) =&gt; {<br \/>\n    URL.revokeObjectURL(event.target.src) \/\/  This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.<br \/>\n    ctx.drawImage(event.target, 0, 0)<br \/>\n  };<br \/>\n  img.src = URL.createObjectURL(blob);<br \/>\n}<br \/>\n<br \/> <br \/>\n  addEventListener(\"paste\", ev =&gt; { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/55559432\/can-i-take-a-screenshot-from-the-clipboard<br \/>\n    for(const item of ev.clipboardData.items) { \/\/\/ Clipboard may contain multiple elements of different type -- text, image, etc<br \/>\n        if(item.type.startsWith(\"image\/\")) { \/\/\/ We are only interested in clipboard data that is an image<br \/>\n            if (emailee == '') {<br \/>\n            emailee=prompt('Your clipboard has a useful image you could share the image with.  Optionally, please enter an email address or SMS number to share with.');<br \/>\n            if (emailee == null) { emailee=''; }<br \/>\n            }<br \/>\n            if (emailee.indexOf('@') != -1) {<br \/>\n            document.getElementById('mydiv').style.overflow='scroll';<br \/>\n            document.getElementById('mycanvas').innerHTML='&lt;br&gt;&lt;canvas style=\"position:absolute;z-index:98;top:0px;left:0px;\" id=thecanvas width=' + screen.width + ' height=' + screen.height + '&gt;&lt;\/canvas&gt;';<br \/>\n            elem=document.getElementById('thecanvas');<br \/>\n            context=elem.getContext('2d');<br \/>\n            renderImage(elem, item.getAsFile()); \/\/context.drawImage(item.getAsFile(), 0, 0);<br \/>\n            document.getElementById('aemail').href=document.getElementById('aemail').href.replace(':?', ':' + emailee + '?');<br \/>\n            document.getElementById('aemail').click();<br \/>\n            document.getElementById('mycanvas').innerHTML='';<br \/>\n            } else if (emailee != '' && emailee.replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n            document.getElementById('mydiv').style.overflow='scroll';<br \/>\n            document.getElementById('mycanvas').innerHTML='&lt;br&gt;&lt;canvas style=\"position:absolute;z-index:98;top:0px;left:0px;\" id=thecanvas width=' + screen.width + ' height=' + screen.height + '&gt;&lt;\/canvas&gt;';<br \/>\n            elem=document.getElementById('thecanvas');<br \/>\n            context=elem.getContext('2d');<br \/>\n            renderImage(elem, item.getAsFile()); \/\/context.drawImage(item.getAsFile(), 0, 0);<br \/>\n            document.getElementById('asms').href=document.getElementById('asms').href.replace(':&', ':' + emailee + '&');<br \/>\n            document.getElementById('asms').click();<br \/>\n            document.getElementById('mycanvas').innerHTML='';<br \/>\n            } else {<br \/>\n            \/\/document.getElementById('mydiv').style.overflow='scroll';<br \/>\n            document.getElementById('mycanvas').innerHTML='&lt;br&gt;&lt;canvas style=\"display:none;position:absolute;z-index:-98;top:0px;left:0px;\" id=thecanvas width=' + screen.width + ' height=' + screen.height + '&gt;&lt;\/canvas&gt;';<br \/>\n            elem=document.getElementById('thecanvas');<br \/>\n            context=elem.getContext('2d');<br \/>\n            renderNoImage(elem, item.getAsFile()); \/\/context.drawImage(item.getAsFile(), 0, 0);<br \/>\n            document.getElementById('mycanvas').innerHTML='';<br \/>\n            }<br \/>\n        }<br \/>\n    }<br \/>\n});<br \/>\n<\/code> <\/p>\n<p> ... which is explained to the user in the following way ...<\/p>\n<blockquote><p>\nShare with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required.\n<\/p><\/blockquote>\n<p> ... in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html---GETME\">\"proof of concept\" body_mouse_deepdive.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-share-content-copy-tutorial\/'>Keyboard Based Cursor Share Content Copy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kbcpcct'>Previous relevant <a target=_blank title='Keyboard Based Cursor Personalized Content Copy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-personalized-content-copy-tutorial\/'>Keyboard Based Cursor Personalized Content Copy Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Personalized Content Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdiveemoji.jpg\" title=\"Keyboard Based Cursor Personalized Content Copy Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Personalized Content Copy Tutorial<\/p><\/div>\n<p>On top of yesterday's <a title='Keyboard Based Cursor Content Copy Tutorial' href='#kbccct'>Keyboard Based Cursor Content Copy Tutorial<\/a> we wanted to offer the user the chance for them to tailor their foreground content on top of the <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> background image.<\/p>\n<p>The user can enter this via the keyboard because there is an HTML div <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true pallette to work with ...<\/p>\n<p><code><br \/>\n&lt;div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick=\"this.innerHTML='';\" onclick='stamp(event);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https:\/\/picsum.photos\/ Lorem Picsum  <font color=blue>You can change emojis if you know the \\002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\\\002602 that leaves cursor just as your emoji).  <\/font><font color=purple>Double click existant foreground emoji element to clear all the foreground emoji elements.<\/font>' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' <font color=olive>onkeypress=kpcursorlook(event); <\/font>onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);&gt;&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p>It's \"title\" attribute now talks about two new pieces of functionality, those being ...<\/p>\n<ul>\n<li><font color=blue>You can change emojis if you know the \\002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\\\002602 that leaves cursor just as your emoji).  <\/font><\/li>\n<li><font color=purple>Double click existant foreground emoji element to clear all the foreground emoji elements.<\/font><\/li>\n<\/ul>\n<p>The choice of keyboard input methodology also suits CSS \"content\" property definitions as one backslash followed by a hexidecimal value left padded with zeroes to a length of six.  See us doing this below for an <span id=myumbrella>umbrella emoji <\/span> (which could also be expressed in an HTML hexadecimal entity way &amp;#x2602; &#x2602; the information for which you can find at <a target=_blank href='https:\/\/www.fileformat.info\/info\/unicode\/char\/2602\/index.htm'>Unicode Character 'UMBRELLA' (U+2602)<\/a> we normally get to by entering \"U+2602\" at a web browser address bar, the knowledge for which we arrive at via entering \"umbrella emojipedia\" and moving down the top link's webpage to find the \"U+2602\")  ...<\/p>\n<p><code><br \/>\n&lt;style&gt; #myumbrella::after { content: '\\002602'; } &lt;\/style&gt;<br \/>\n<\/code><\/p>\n<style> #myumbrella::after { content: '\\002602'; } <\/style>\n<p> ... that feeds into some new <a target=_blank title='Event onkeydown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onkeypress.asp'>\"onkeypress\"<\/a> keyboard event logic ...<\/p>\n<p><code><br \/>\n  function kpcursorlook(evt) {<br \/>\n    var atofa=['a','b','c','d','e','f'];<br \/>\n    var rgbit='';<br \/>\n    if (evt.keyCode == 92) {<br \/>\n     if (newu.length == 1) { gro=true; } else { gro=false; }<br \/>\n     newu=(\"\\\\\").substring(0,1);<br \/>\n    } else if (evt.keyCode &gt;= 48 && evt.keyCode &lt;= 57) {<br \/>\n     newu+=('' + eval(-48 + evt.keyCode));<br \/>\n    } else if (evt.keyCode &gt;= 65 && evt.keyCode &lt;= 70) {<br \/>\n     newu+=('' + atofa[eval(-65 + evt.keyCode)]);<br \/>\n    } else if (evt.keyCode &gt;= 97 && evt.keyCode &lt;= 102) {<br \/>\n     newu+=('' + atofa[eval(-97 + evt.keyCode)]);<br \/>\n    }<br \/>\n    if (newu.length == 7) {<br \/>\n     if (lastcursor.indexOf((\"\\\\\\\\\").substring(0,2)) != -1) {<br \/>\n       rgbit=lastcursor.split((\"\\\\\\\\\").substring(0,2))[1].substring(6);<br \/>\n       lastcursor=lastcursor.split((\"\\\\\\\\\").substring(0,2))[0] + (\"\\\\\").substring(0,1) + newu + rgbit;<br \/>\n       document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n     } else if (lastcursor.indexOf((\"\\\\\").substring(0,1)) != -1) {<br \/>\n       rgbit=lastcursor.split((\"\\\\\").substring(0,1))[1].substring(6);<br \/>\n       lastcursor=lastcursor.split((\"\\\\\").substring(0,1))[0] + newu + rgbit;<br \/>\n       if (gro) {<br \/>\n         lastcursor=lastcursor.replace('&gt;Shift\/Alt\/Ctrl', '&gt;').replace('&gt;Shift', '&gt;').replace('&gt;Alt', '&gt;').replace('&gt;Ctrl', '&gt;').replace(\" width='126'\", \" width='20'\").replace(\" width='66'\", \" width='20'\").replace(\" height='48'\", \" height='20'\").replace('0 0 100 100', '0 0 20 20');<br \/>\n       }<br \/>\n       document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n     }<br \/>\n    }<br \/>\n   \/\/ console.log(evt.keyCode);<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> ... in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html-GETME\">\"proof of concept\" body_mouse_deepdive.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Two more \"title\" attribute pieces of functionality are now ...<\/p>\n<ul>\n<li><font color=darkgreen>With complex emoji entries do not zero leftpad until your last simple entity eg. \\\\1F6A3\\200D\\2640\\00FE0F could define a Woman Rowing complex emoji.<\/font><\/li>\n<li><font color=brown>Optionally make emojis bigger after \\ with + two time multipliers.<\/font><\/li>\n<\/ul>\n<p>The choice of keyboard input methodology also suits CSS \"content\" property definitions as one backslash followed by \"first off\" sets of HTML entities they should not left zero pad in their entry, followed by a last HTML entity hexidecimal value left padded with zeroes to a length of six to finish up with.  See us doing this below for a <span id=myrowing>woman rowing emoji <\/span> (which could also be expressed in an HTML hexadecimal entity way &amp;#x1f6a3;&amp;#x0200d;&amp;#x02640;&amp;#x0fe0f; the information for which you can find at <a target=_blank href='https:\/\/emojiterra.com\/woman-rowing-boat\/'>&#x1f6a3;&#x0200d;&#x02640;&#x0fe0f; Woman Rowing Boat Emoji<\/a> we normally get to by entering \"woman rowing emoji\" at the web browser address bar)  ...<\/p>\n<p><code><br \/>\n&lt;style&gt; #myrowing::after { content: '\\01f6a3\\00200d\\002640\\00fe0f'; } &lt;\/style&gt;<br \/>\n<\/code><\/p>\n<style> #myrowing::after { content: '\\01f6a3\\00200d\\002640\\00fe0f'; } <\/style>\n<p> ... in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html--GETME\">\"proof of concept\" body_mouse_deepdive.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p><img decoding=\"async\" style=\"width:100%;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive_complexemoji.jpg\"><\/img><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-personalized-content-copy-tutorial\/'>Keyboard Based Cursor Personalized Content Copy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kbccct'>Previous relevant <a target=_blank title='Keyboard Based Cursor Content Copy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-content-copy-tutorial\/'>Keyboard Based Cursor Content Copy Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Content Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.jpg\" title=\"Keyboard Based Cursor Content Copy Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Content Copy Tutorial<\/p><\/div>\n<p>The <a target=_blank title='Event onkeydown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onkeydown.asp'>\"onkeydown\"<\/a> keyboard event can involve in its logic three <a target=_blank title='Mouse event information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/obj_mouseevent.asp'>mouse event<\/a> (event object) property usages that caught our interest recently ...<\/p>\n<ul>\n<li><a target=_blank title='event.altKey information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_altkey.asp'>event.altKey<\/a><\/li>\n<li><a target=_blank title='event.shiftKey information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_shiftkey.asp'>event.shiftKey<\/a><\/li>\n<li><a target=_blank title='event.ctrlKey information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_ctrlkey.asp'>event.ctrlKey<\/a><\/li>\n<\/ul>\n<p> ... and we wanted to have \"keyboard\" meets \"mouse\" events, along with the brilliance of <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> regarding background image randomosity and quality, working with HTML ...<\/p>\n<p><code><br \/>\n&lt;div id=mydiv onfocus='setTimeout(alte, 1000);' onclick='stamp(this);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https:\/\/picsum.photos\/ Lorem Picsum' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' data-onkeypress=xycursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);&gt;&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p> ... in a way we hadn't tried before that called on some inhouse cursor SVG creations <font size=1>(and so is, alas, just a non-mobile fully featured experience)<\/font>, in the sense that ...<\/p>\n<ol>\n<li>keyboard helps creating the \"what\" regarding content ...<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var lastkeymodifier=''<br \/>\n  var lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\\\002753&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, crosshair\";<br \/>\n  var pos3=-1, pos4=-1;<br \/>\n  var subdiv=1;<br \/>\n  var lastpos3=-2, lastpos4=-1;<br \/>\n  var allowable=false;<br \/>\n<br \/>\n  function cursorlook(evt) {<br \/>\n    if (evt.altKey) {<br \/>\n      if (lastkeymodifier != 'alt') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Alt\\\\01f3d5&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, progress\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='alt';<br \/>\n      }<br \/>\n    } else if (evt.ctrlKey) {<br \/>\n      if (lastkeymodifier != 'ctrl') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Ctrl\\\\01f333&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, pointer\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='ctrl';<br \/>\n      }<br \/>\n    } else if (evt.shiftKey) {<br \/>\n      if (lastkeymodifier != 'shift') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(255,0,0,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Shift\\\\01f389&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, grab\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='shift';<br \/>\n      }<br \/>\n    } else {<br \/>\n      if (lastkeymodifier != '') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\\\002753&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, crosshair\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>mouse <a target=_blank title='Event onmousedown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onmousedown.asp'>\"onmousemove\"<\/a> or <a target=_blank title='Event ontouchdown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_touchmove.asp'>\"ontouchmove\"<\/a> helps with the \"where\" regarding content above ...<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var pos3=-1, pos4=-1;<br \/>\n  var subdiv=1;<br \/>\n  var lastpos3=-2, lastpos4=-1;<br \/>\n  var allowable=false;<br \/>\n<br \/>\n  function xycursorlook(e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>preparations for \"onclick\" way a cursor can be plonked into (real lasting) content ...<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\\\002753&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, crosshair\";<br \/>\n  var pos3=-1, pos4=-1;<br \/>\n  var subdiv=1;<br \/>\n  var lastpos3=-2, lastpos4=-1;<br \/>\n  var allowable=false;<br \/>\n  <br \/>\n  function stamp(divo) {<br \/>\n    if (('' + pos3).indexOf('-') == -1) {<br \/>\n    if (allowable) {<br \/>\n    \/\/if (allowed) {<br \/>\n    \/\/allowed=false;<br \/>\n    \/\/setTimeout(reseta, 2000);<br \/>\n    divo.innerHTML+='&lt;div id=div' + subdiv + ' style=\"position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;\"&gt;&lt;\/div&gt;&lt;style&gt; #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } &lt;\/style&gt;';<br \/>\n    subdiv++;<br \/>\n    \/\/console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);<br \/>\n    \/\/console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);<br \/>\n    lastpos3=pos3;<br \/>\n    lastpos4=pos4;<br \/>\n    \/\/}<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/ol>\n<p> ... with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html_GETME\">\"proof of concept\" body_mouse_deepdive.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55848' onclick='var dv=document.getElementById(\"d55848\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onkeydown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55848' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55876' onclick='var dv=document.getElementById(\"d55876\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onkeypress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55876' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55891' onclick='var dv=document.getElementById(\"d55891\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/share\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55891' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55897' onclick='var dv=document.getElementById(\"d55897\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55897' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55913' onclick='var dv=document.getElementById(\"d55913\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/zoom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55913' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60499' onclick='var dv=document.getElementById(\"d60499\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scale\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60499' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60506' onclick='var dv=document.getElementById(\"d60506\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/collaboration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60506' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re on the lookout for ways to improve the sharing and collaboration functionality of yesterday&#8217;s Images to Canvas No Clicking Form Signature Tutorial&#8216;s &#8220;User of Signature&#8221; canvas using web application. We&#8217;re calling on .. Safari and Google Chrome web browser(s) &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-via-image-web-share-api-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[4441,69,1832,111,1653,3697,184,4439,1604,1709,2370,2369,2365,349,380,2751,409,430,452,2730,520,541,2258,576,590,652,1807,2240,932,4440,970,997,1083,1094,1095,1841,2435,1133,1137,1784,2272,4068,1319,1404,1411,4031,2257,1481],"class_list":["post-60506","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-actual","tag-ajax","tag-annotation","tag-attachment","tag-base64","tag-base64_decode","tag-canvas","tag-clicking","tag-collaboration","tag-communication","tag-contain","tag-cover","tag-dimensions","tag-document","tag-email","tag-exim","tag-external-javascript","tag-file_put_contents","tag-form","tag-formdata","tag-google-chrome","tag-graphics","tag-height","tag-html","tag-image","tag-javascript","tag-link","tag-mail-server","tag-php","tag-placement","tag-post","tag-programming","tag-safari","tag-scale","tag-scaling","tag-scribble","tag-send","tag-share","tag-sharing","tag-signature","tag-size","tag-sizing","tag-tutorial","tag-web-browser","tag-web-server","tag-web-share-api","tag-width","tag-xmlhttprequest"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60506"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=60506"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60506\/revisions"}],"predecessor-version":[{"id":60546,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60506\/revisions\/60546"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}