<html>
<head>
<title>Cursor Change via Shift or Alt or Control versus Caps Lock Keyboard Presses - RJM Programming - May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum</title>
<style>

body {
display: inline-block;
font-size: 128px;
line-height: 1.2;
text-align: center;
background: url(//picsum.photos/1000/1000) center center no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;

color: rgba(255,0,0,0.6);

span { color: transparent; }
}

div {
background-color: transparent;
caret-color: transparent;
}

@media only screen and (max-width: 1000px) {
div {
background: url(//picsum.photos/1000/1000) center center no-repeat;
}
}

div:focus {
outline: none !important;
}

html {
height: 100%;
display: flex;
cursor: Url("data:image/svg+xml;utf8,<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;'><text y='80%'>Shift/Alt/Ctrl\002753</text></svg>") 16 0, crosshair;
}

</style>

<script type='text/javascript'>
var thesource=location.search.split('numbi=')[1] ? (decodeURIComponent(location.search.split('numbi=')[1].split('&')[0]).replace('+',' ').replace(' ',' ').replace('-',' ').substring(0,1) == ' ' ? '//www.rjmprogramming.com.au/ITblog' : '//picsu' + 'm.photos') : '//picsu' + 'm.photos';
var themp='';
var kpdone=false;
var awo=null;
var gro=false;
var lastkeymodifier=''
var lastcursor="Url(\"data:image/svg+xml;utf8,<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;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
var lastaltcursor='', lastctrlcursor='', lastshiftcursor='';
var pos3=-1, pos4=-1;
var subdiv=1;
var emailee='';
var newu='';
var factor=1;
var lastpos3=-2, lastpos4=-1;
var allowable=false;
var elem=null;
var numbi=location.search.split('numbi=')[1] ? reduce(decodeURIComponent(location.search.split('numbi=')[1].split('&')[0]).replace('+','').replace(' ','').replace('-','')) : '1';
var context=null;
//var allowed=true;

if (thesource != '//picsu' + 'm.photos') {
themp='/';
}

//function reseta() {
// allowed=true;
//}

if (numbi != '') {
if (eval('' + numbi) == 2) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top right; background-size: 50% 100%, 50% 100%; background-repeat: no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 3) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right; background-size: 33% 100%, 34% 100%, 33% 100%; background-repeat: no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 4) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top right, bottom left, bottom right; background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 5) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, bottom left, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 6) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 33% 50%, 34% 50%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 7) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 27143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, center center, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 33%, 33% 50%, 34% 34%, 33% 50%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 8) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 27143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 87123646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, center left, center center, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 50%, 33% 34%, 34% 34%, 33% 33%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 9) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 27143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 67143446) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 87123646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 33%, 33% 34%, 34% 34%, 33% 34%, 33% 33%, 34% 33%, 33% 33%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (thesource != '//picsu' + 'm.photos') {
document.head.innerHTML+='<style> ' + document.head.innerHTML.split('<style>')[1].split('</style>')[0].replace(/\/\/picsum\.photos/g, thesource).replace(/\?random\=/g, themp + '?random=').replace(/00\)/g, '00' + themp + '?random=' + Math.floor(Math.random() * 198765434) + ')') + ' </style>';
}
} else if (thesource != '//picsu' + 'm.photos') {
document.head.innerHTML+='<style> ' + document.head.innerHTML.split('<style>')[1].split('</style>')[0].replace(/\/\/picsum\.photos/g, thesource).replace(/\?random\=/g, themp + '?random=').replace(/00\)/g, '00' + themp + '?random=' + Math.floor(Math.random() * 198765434) + ')') + ' </style>';
}

function reduce(invl) {
if (('' + invl).trim() == '') { return '1'; }
if (('' + invl).trim().replace(/0/g,'').replace(/1/g,'').replace(/0/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,'') != '') { return '1'; }
var retval=0, ij=0;
var cinvl='' + invl;
var xcinvl='';
for (ij=0; ij<cinvl.length; ij++) {
if (cinvl.substring(ij).substring(0,1) != '-') {
retval+=eval(cinvl.substring(ij).substring(0,1));
}
}
xcinvl='' + retval;
while (xcinvl.length > 1) {
retval=0;
for (ij=0; ij<xcinvl.length; ij++) {
if (xcinvl.substring(ij).substring(0,1) != '-') {
retval+=eval(xcinvl.substring(ij).substring(0,1));
}
}
xcinvl='' + retval;
}
if (retval == 0) { retval=1; }
return '' + retval;
}

function andthen() {
document.getElementById("mydiv").innerHTML="<div id=mycanvas></div>";
}

function stamp(evt) {
var divo=evt.target;
xycursorlook(evt);
if (('' + pos3).indexOf('-') == -1) {
if (allowable) {
//if (allowed) {
//allowed=false;
//setTimeout(reseta, 2000);
if (factor != 1) {
divo.innerHTML+='<div title="Double click to clear all the foreground emoji elements." ondblclick="setTimeout(andthen,2000);" id=div' + subdiv + ' style="position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:' + eval(factor * 50) + 'px;background-color:transparent;"></div><style> #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } </style>';
} else {
divo.innerHTML+='<div title="Double click to clear all the foreground emoji elements." ondblclick="setTimeout(andthen,2000);" id=div' + subdiv + ' style="position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;"></div><style> #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } </style>';
}
subdiv++;
//console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);
//console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);
lastpos3=pos3;
lastpos4=pos4;
//}
}
}
}

function xycursorlook(e) {
e = e || window.event;
e.preventDefault();

if (e.touches) {
if (e.touches[0].pageX) {
pos3 = e.touches[0].pageX;
pos4 = e.touches[0].pageY;
} else {
pos3 = e.touches[0].clientX;
pos4 = e.touches[0].clientY;
}
//console.log('pos3=' + pos3 + ',pos4=' + pos4);
} else if (e.clientX || e.clientY) {
pos3 = e.clientX;
pos4 = e.clientY;
} else {
pos3 = e.pageX;
pos4 = e.pageY;
}
}

function alte() {
allowable=true;
}

function kpcursorlook(evt) {
var atofa=['a','b','c','d','e','f'];
var rgbit='';
var exs=[];
var exc='';
var iexc=0;
var seven=7;
var thereismore=false;
if (evt.keyCode == 92) {
if (newu.length == 1) { gro=true; } else if ((newu + ' ').substring(0,1) != ("\\").substring(0,1)) { gro=false; }
if (eval('' + newu.length) > 1 && eval(eval('' + newu.length) % 7) != 0 && (newu + ' ').substring(0,1) == ("\\").substring(0,1)) {
console.log('start');
exs=newu.split(("\\").substring(0,1));
if (exs.length > 2) {
for (iexc=1; iexc<eval(-1 + exs.length); iexc++) {
exc+=("\\").substring(0,1);
exc+=exs[iexc];
}
newu=newu.replace(exc, '');
//alert('exc=' + exc + ' and newu left=' + newu);
}
while (eval(eval('' + newu.length) % 7) != 0) {
newu=("\\").substring(0,1) + '0' + newu.substring(1);
thereismore=true;
}
newu=exc + newu;
newu+=("\\").substring(0,1);
} else if ((newu + ' ').substring(0,1) == ("\\").substring(0,1) && eval(eval('' + newu.length) % 7) == 0 ) {
newu+=("\\").substring(0,1);
} else {
newu=("\\").substring(0,1);
}
} else if (evt.keyCode >= 48 && evt.keyCode <= 57) {
newu+=('' + eval(-48 + evt.keyCode));
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
newu+=('' + atofa[eval(-65 + evt.keyCode)]);
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
newu+=('' + atofa[eval(-97 + evt.keyCode)]);
} else if (eval(eval('' + newu.length) % 7) == 1 && (newu + ' ').substring(0,1) == ("\\").substring(0,1)) {
if (evt.keyCode == 43 || evt.keyCode == 187) { factor*=2; }
//alert('2:' + evt.keyCode);
} else if (evt.keyCode == 43 || evt.keyCode == 187) {
if (!kpdone) {
location.href=document.URL.split('?')[0].split('#')[0] + '?numbi=+' + numbi;
kpdone=true;
}
//alert('0:' + evt.keyCode);
}
if (!thereismore && eval(eval('' + newu.length) % 7) == 0 && (newu + ' ').substring(0,1) == ("\\").substring(0,1)) {
//alert(newu);
if (lastcursor.indexOf(("\\\\").substring(0,2)) != -1) {
rgbit=lastcursor.split(("\\\\").substring(0,2))[1].substring(6);
seven=eval('' + newu.length);
lastcursor=lastcursor.split(("\\\\").substring(0,2))[0] + newu.replace(("\\").substring(0,1), "~~").replace(("\\").substring(0,1), "~~").replace(("\\").substring(0,1), "~~").replace(("\\").substring(0,1), "~~").replace(("\\").substring(0,1), "~~").replace(/\~\~/g, ("\\").substring(0,1) + ("\\").substring(0,1)) + rgbit;
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
newu='';
//factor=1;
} else if (lastcursor.indexOf(("\\").substring(0,1)) != -1) {
rgbit=lastcursor.split(("\\").substring(0,1))[1].substring(6);
seven=eval('' + newu.length);
lastcursor=lastcursor.split(("\\").substring(0,1))[0] + newu + rgbit;
if (gro) {
lastcursor=lastcursor.replace('>Shift/Alt/Ctrl', '>').replace('>Shift', '>').replace('>Alt', '>').replace('>Ctrl', '>').replace(" width='126'", " width='" + eval(20 * factor * eval('' + newu.length) / seven) + "'").replace(" width='66'", " width='" + eval(20 * factor * eval('' + newu.length) / seven) + "'").replace(" height='48'", " height='" + eval(20 * factor * eval('' + newu.length) / seven) + "'").replace('0 0 100 100', '0 0 ' + eval(20 * factor * eval('' + newu.length) / seven) + ' ' + eval(20 * factor * eval('' + newu.length) / seven)).replace('font-size:16px','font-size:' + eval(16 * factor) + 'px').replace('font-size:17px','font-size:' + eval(17 * factor) + 'px').replace('border-radius:15px','border-radius:' + eval(15 * factor) + 'px').replace(') 16 0,',') ' + eval(16 * factor) + ' 0,');
}
newu='';
//factor=1;
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
}
}
// console.log(evt.keyCode);
}

function cursorlook(evt) {
var cbe=false;
if (evt.altKey) {
if (lastkeymodifier != 'alt') {
factor=1;
lastcursor="Url(\"data:image/svg+xml;utf8,<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;'><text y='80%'>Alt\\01f3d5</text></svg>\") 16 0, progress";
lastaltcursor=lastcursor;
lastshiftcursor='';
lastctrlcursor='';
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
lastkeymodifier='alt';
}
} else if (evt.ctrlKey) {
if (lastkeymodifier != 'ctrl') {
factor=1;
lastcursor="Url(\"data:image/svg+xml;utf8,<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;'><text y='80%'>Ctrl\\01f333</text></svg>\") 16 0, pointer";
lastctrlcursor=lastcursor;
lastshiftcursor='';
lastaltcursor='';
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
lastkeymodifier='ctrl';
}
} else if (evt.shiftKey) {
if (lastkeymodifier != 'shift') {
factor=1;
lastcursor="Url(\"data:image/svg+xml;utf8,<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;'><text y='80%'>Shift\\01f389</text></svg>\") 16 0, grab";
lastshiftcursor=lastcursor;
lastaltcursor='';
lastctrlcursor='';
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
lastkeymodifier='shift';
}
} else {
//console.log('evt.keyCode=' + evt.keyCode);
if (evt.keyCode == 220) {
cbe=true;
} else if (evt.keyCode >= 48 && evt.keyCode <= 57) {
if (!kpdone && evt.keyCode >= 49 && evt.keyCode <= 57) {
location.href=document.URL.split('?')[0].split('#')[0] + '?numbi=' + eval(evt.keyCode - 48);
}
cbe=true;
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
cbe=true;
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
cbe=true;
} else if (evt.keyCode == 43 || evt.keyCode == 187) {
if (!kpdone) {
location.href=document.URL.split('?')[0].split('#')[0] + '?numbi=+' + numbi;
}
} //else {
//alert(evt.keyCode);
//}
kpdone=true;
if (lastkeymodifier != '' && !cbe) {
factor=1;
console.log('' + document.getElementById('mydiv').innerHTML);
lastcursor="Url(\"data:image/svg+xml;utf8,<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;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
lastkeymodifier='';
}
}
}

function renderNoImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
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.
ctx.drawImage(event.target, 0, 0)
img.style.display='none';
img.style.zIndex='-123';
};
img.src = URL.createObjectURL(blob);
}

function renderImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
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.
ctx.drawImage(event.target, 0, 0)
};
img.src = URL.createObjectURL(blob);
}

function premt() {
document.getElementById('mydiv').style.fontSize='28px';
document.getElementById('mydiv').style.color='green';
document.getElementById('mydiv').style.textShadow='2px 2px red';
document.getElementById('mydiv').innerHTML='Temporary 20 second message. ' + document.getElementById('mydiv').title;
setTimeout(postmt, 20000);
}

function postmt() {
document.getElementById('mydiv').style.color='transparent';
document.getElementById('mydiv').style.textShadow='';
document.getElementById('mydiv').innerHTML='';
}

function mt(ih) {
setTimeout(premt, 2000);
return ih;
}

addEventListener("paste", ev => { // thanks to https://stackoverflow.com/questions/55559432/can-i-take-a-screenshot-from-the-clipboard
for(const item of ev.clipboardData.items) { /// Clipboard may contain multiple elements of different type -- text, image, etc
if(item.type.startsWith("image/")) { /// We are only interested in clipboard data that is an image
//document.getElementById('aemail').click();
//document.getElementById('mydiv').style.overflow='scroll';
//document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
//elem=document.getElementById('thecanvas');
//context=elem.getContext('2d');
//renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
if (emailee == '') {
var defe='';
if (('' + location.hash).indexOf('To#') != -1) { defe=atob(('' + location.hash).split('To#')[1]); }
emailee=prompt('Your clipboard has a useful image you could share. Optionally, please enter an email address or SMS number to share with. You can enter a space to take the screenshot and further annotate onto a canvas (where default zoom is 1.0 but you can change with your own zoom level that involves a dot or percentage).', defe);
if (emailee == null) { emailee=''; }
}
if (emailee.indexOf('@') != -1) {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=canvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('canvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('aemail').href=document.getElementById('aemail').href.replace(':?', ':' + emailee + '?') + 'To#' + btoa(emailee);
document.getElementById('aemail').click();
document.getElementById('mycanvas').innerHTML='';
} 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,'') == '') {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=canvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('canvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('asms').href=document.getElementById('asms').href.replace(':&', ':' + emailee + '&');
document.getElementById('asms').click();
document.getElementById('mycanvas').innerHTML='';
} else if (emailee != '' && emailee.replace(/\%/g,'').replace(/\ /g,'').replace(/\./g,'').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,'') == '') {
document.getElementById('mycanvas').innerHTML='<br><canvas style="display:none;position:absolute;z-index:-98;top:0px;left:0px;" id=canvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('canvas');
context=elem.getContext('2d');
renderNoImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
if (emailee.trim() == '') {
awo=window.open('./user_of_signature_signature.htm?zoom=1.0','_blank','top=100,left=100,width=1200,height=900');
} else {
awo=window.open('./user_of_signature_signature.htm?zoom=' + encodeURIComponent(emailee.trim()),'_blank','top=100,left=100,width=1200,height=900');
}
emailee='';
} else {
//document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="display:none;position:absolute;z-index:-98;top:0px;left:0px;" id=canvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('canvas');
context=elem.getContext('2d');
renderNoImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('mycanvas').innerHTML='';
}

//alert('hello');
/// Do something with the data, image available as `item.getAsFile()`
}
}
});
</script>
</head>
<body data-onload="document.getElementById('mydiv').click();" onload="document.getElementById('aemail').href=document.getElementById('aemail').href.split('subject=')[0] + 'subject=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#MyCreationWePasteIntoEmailBody'); if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (document.body.innerHTML.indexOf('ur' + 'l(') == -1 && ('' + numbi) == '1') { document.body.innerHTML=mt(document.body.innerHTML).replace(' style=' + String.fromCharCode(34), ' style=' + String.fromCharCode(34) + 'background: u' + 'rl(' + document.URL.split('/')[0] + thesource + '/500/500' + themp + ') center center no-repeat;background-size:cover;'); } }">
<div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick="this.innerHTML='<div id=mycanvas></div>';" 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 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). Double click existant foreground emoji element to clear all the foreground emoji elements. 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. Optionally make emojis bigger after \ with + two time multipliers. Share 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 work. If first key is (+ is RJM image else) from 1 to 9 that will be number of background images displayed.' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;overflow:hidden;' onkeypress=kpcursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);><div id=mycanvas></div></div><a target=_blank id=aemail href="mailto:?subject=My%20Creation"></a><a target=-blank id=asms href="sms:&body="></a>
</body>
</html>