&lt;!doctype html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;meta charset="UTF-8"&gt;<br>&lt;title&gt;Textarea Pointing - RJM Programming - December, 2017&lt;/title&gt;<br>&lt;script type='text/javascript'&gt;<br><br>var focusto='motherboard';<br>var nextsuffix='2';<br>var firstoh='', x, y;<br>var dscriptih='&lt;style&gt; &lt;/style&gt;';<br>var fontf='Arial';<br>var fonts='12px';<br>var fontc='#000000';<br>var fontw='normal';<br>var lastfontf='Arial';<br>var lastfonts='12px';<br>var lastfontc='#000000';<br>var lastfontw='normal';<br>var cmode=true;<br>var etosofar='';<br>var celem=null;<br>var ccontext=null;<br>var ccounter=0,cco=0;<br>var durl='';<br>var namefont='Arial_12px_normal';<br>var learnfont=false;<br>var learnfontmode='BOTH';<br>var pntwo='';<br>var cca=32;<br>var done=false;<br>var shouldmaintain=false;<br>var docurl=document.URL;<br>var sels='';<br>var iuc=false;<br>var dynamiccanvas=false;<br>var taipos=-1, tajpos=-1;<br>var local_font='';<br>var local_coords='';<br>var mousePosition = {x:0, y:0};<br>var cccmd='', ccmds=[];<br>var gotakeypress='';<br><br>function ccmdspush(what) {<br>  cccmd+=' ' + what;<br>  ccmds.push(what);<br>  //document.title=what;<br>}<br>  <br><br>function plotit(charsare, tx, ty) {<br>        var ico=0, css='#000000', lastcss='#000000', minx=0, maxx=0, miny=0, maxy=0;<br>        var coordsare=[], xfactor=1.0, yfactor=1.0, twelve=12,cf='';<br>        var xfontf=fontf;<br>        var xfontw=fontw;<br>        var xfonts=fonts;<br>        if (dynamiccanvas && local_font != '') {<br>          if (local_coords.indexOf(',') == -1) {<br>    if (document.getElementById(focusto).outerHTML.indexOf('font-family:') != -1) xfontf=fmap((document.getElementById(focusto).outerHTML + ';').split('ont-family:')[1].split(';')[0]);<br>    if (document.getElementById(focusto).outerHTML.indexOf('font-style:') != -1) xfontw=(document.getElementById(focusto).outerHTML + ';').split('ont-style:')[1].split(';')[0];<br>    if (document.getElementById(focusto).outerHTML.indexOf('font-size:') != -1) xfonts=(document.getElementById(focusto).outerHTML + ';').split('ont-size:')[1].split(';')[0];<br>    cf = xfontw.replace('normal','') + " " + xfonts + " " + xfontf;<br>    twelve=eval(xfonts.split('p')[0]);<br>    ccontext.font = cf;<br>    ccontext.fillStyle='#000000'; //(charsare,tx,ty);<br>    ccontext.fillText(charsare,eval(tx),eval(ty));<br>    ccmdspush("ccontext.font = '" + cf + "'; ");<br>    ccmdspush("ccontext.fillStyle='#000000'; ");<br>    ccmdspush("ccontext.fillText(String.fromCharCode(" + charsare.charCodeAt() + ")," + eval(tx) + "," + eval(ty) + "); ");<br><br>            //alert(cf + ' charsare=' + charsare + ' ' + tx + ',' + ty);<br>          } else {<br>            ty-=eval(document.getElementById('fonts').value.split('p')[0]);<br>            coordsare=(' ' + local_coords).split(',');<br>            //alert(coordsare.length);<br>            var xx="";<br>            for (ico=1; ico&lt;coordsare.length; ico+=2) {<br>             if (ico == 1) {<br>              minx=Math.floor(Math.abs(eval(coordsare[-1 + ico])));<br>              maxx=Math.floor(Math.abs(eval(coordsare[-1 + ico])));<br>              miny=Math.floor(Math.abs(eval(coordsare[ico])));<br>              maxy=Math.floor(Math.abs(eval(coordsare[ico])));<br>             } else {<br>              if (minx &gt; Math.floor(Math.abs(eval(coordsare[-1 + ico])))) {<br>               minx=Math.floor(Math.abs(eval(coordsare[-1 + ico])));<br>              }<br>              if (maxx &lt; Math.floor(Math.abs(eval(coordsare[-1 + ico])))) {<br>               maxx=Math.floor(Math.abs(eval(coordsare[-1 + ico])));<br>              }<br>              if (miny &gt; Math.floor(Math.abs(eval(coordsare[ico])))) {<br>               miny=Math.floor(Math.abs(eval(coordsare[ico])));<br>              }<br>              if (maxy &lt; Math.floor(Math.abs(eval(coordsare[ico])))) {<br>               maxy=Math.floor(Math.abs(eval(coordsare[ico])));<br>              }<br>             }<br>             xx+=' ' + ico;<br>            }<br>            //alert(xx);<br>            maxy+=miny;<br>            maxx+=minx;<br>            xfactor=eval(eval(0.0 + eval(eval(5) / eval(8)) * eval(document.getElementById('fonts').value.split('p')[0])) / eval(0.0 + maxx));<br>            yfactor=eval(eval(0.0 + eval(document.getElementById('fonts').value.split('p')[0])) / eval(0.0 + maxy));<br>      xx='';<br>            for (ico=1; ico&lt;coordsare.length; ico+=2) {<br>             if (('' + coordsare[ico]).indexOf('.') != -1) {<br>              css='#' + ('000' + ('' + eval(('' + coordsare[ico]).split('.')[1].substring(0,3)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico]).split('.')[1].substring(3,6)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico]).split('.')[1].substring(6,9)).toString(16))).slice(-2);<br>             }<br>              //alert('' + coordsare[-1 + ico] + ' ' + coordsare[ico] + ' ' + ' ' + xfactor + ' ' + yfactor + ' ' + local_coords + ' maxx=' + maxx + ' maxy=' + maxy + ' ' + eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico])))) + ' ' + eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))));<br>             if (ico == 1) {<br>              ccontext.beginPath();<br>              ccontext.strokeStyle=css;<br>              ccontext.moveTo(eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico])))),eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))));<br>    ccmdspush("ccontext.beginPath(); ");<br>    ccmdspush("ccontext.strokeStyle='" + css + "'; ");<br>    ccmdspush("ccontext.moveTo(" + eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico]))))+ "," + eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))) + "); ");<br>             xx+=' ' + " move to " + eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico]))))+ "," + eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))) + "); ";<br>             } else if (('' + coordsare[ico]).indexOf('-') != -1 || ('' + coordsare[-1 + ico]).indexOf('-') != -1 || eval(('' + coordsare[-1 + ico])) &lt; 0 || eval(('' + coordsare[ico])) &lt; 0) {<br>              ccontext.stroke();<br>              ccontext.beginPath();<br>    ccmdspush("ccontext.stroke(); ");<br>    ccmdspush("ccontext.beginPath(); ");<br>              if (css != lastcss) {<br>               ccontext.strokeStyle=css;<br>    ccmdspush("ccontext.strokeStyle='" + css + "'; ");<br>              }<br><br><br>              //alert('' + eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico])))) + ',' + eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))));<br>              ccontext.moveTo(eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico])))),eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))));<br>    ccmdspush("ccontext.moveTo(" + eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico]))))+ "," + eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))) + "); ");<br>             xx+=' ' + " move to " + eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico]))))+ "," + eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))) + "); ";<br>             } else {<br>              if (css != lastcss) {<br>               ccontext.strokeStyle=css;<br>    ccmdspush("ccontext.strokeStyle='" + css + "'; ");<br>              }<br>              ccontext.lineTo(eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico])))),eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))));<br>    ccmdspush("ccontext.lineTo(" + eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico]))))+ "," + eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))) + "); ");<br>             xx+=' ' + " " + eval(eval(tx) + Math.floor(xfactor * Math.abs(eval(coordsare[-1 + ico]))))+ "," + eval(eval(ty) + Math.floor(yfactor * Math.abs(eval(coordsare[ico])))) + "); ";<br>            }<br>            }<br>            //alert(xx);<br>            ccontext.stroke();<br>            ccontext.beginPath();<br>    if (1 == 2) {<br>    ccmds[-1 + ccmds.length]="ccontext.stroke(); ";<br>    } else {<br>    ccmdspush("ccontext.stroke(); ");<br>    }<br>    ccmdspush("ccontext.beginPath(); ");<br>            //document.getElementById('bcanvas').click();  //?<br>          }<br>        }<br>}<br><br>function fmap(inff) {<br> if (learnfont) {<br>           if (localStorage && inff.split('_')[0].split('-')[0] != inff) {<br>             if (localStorage.getItem('fd_' + inff) != '') {<br>               if (local_font == '') {<br>                 local_font=localStorage.getItem('fd_' + inff);<br>                 //alert(inff + '34:' + local_font);<br>                 local_font=decodeURIComponent(local_font);<br>                 if (local_font == null) local_font='';<br>               }<br>               dynamiccanvas=true;<br>               if (taipos &lt; 0) {<br>                 taipos=0;<br>                 tajpos=0;<br>               }<br>               return inff.split('_')[0].split('-')[0];<br>             }<br>           }<br> }<br> return inff;<br>}<br><br><br>function clone() {<br>  var secondoh=firstoh.replace("z-index:1;","z-index:" + nextsuffix + ";").replace(" ", " class='mboard" + nextsuffix + "' ");<br>  //secondoh=secondoh.replace(/300/g,"100"); <br>  secondoh=secondoh.replace("top:0px;","top:" + y + "px;");<br>  secondoh=secondoh.replace("left:0px;","left:" + x + "px;");<br>  secondoh=secondoh.replace(/motherboard/g,"motherboard" + nextsuffix); <br>  secondoh=secondoh.replace("font-family:" + fmap(fontf) + ";","font-family:" + fmap(document.getElementById('fontf').value) + ";");<br>  secondoh=secondoh.replace("font-size:" + fonts + ";","font-size:" + document.getElementById('fonts').value + ";");<br>  secondoh=secondoh.replace("font-style:" + fontw + ";","font-style:" + document.getElementById('fontw').value + ";");<br>  secondoh=secondoh.replace("color:" + fontc + ";","color:" + document.getElementById('fontc').value + ";");<br>  secondoh=secondoh.replace("font-family:" + fmap(fontf) + ";","font-family:" + fmap(document.getElementById('fontf').value) + ";");<br>  secondoh=secondoh.replace("font-size:" + fonts + ";","font-size:" + document.getElementById('fonts').value + ";");<br>  secondoh=secondoh.replace("font-style:" + fontw + ";","font-style:" + document.getElementById('fontw').value + ";");<br>  secondoh=secondoh.replace("color:" + fontc + ";","color:" + document.getElementById('fontc').value + ";");<br><br>  secondoh=secondoh.replace("font-family:" + fmap(lastfontf) + ";","font-family:" + fmap(document.getElementById('fontf').value) + ";");<br>  secondoh=secondoh.replace("font-size:" + lastfonts + ";","font-size:" + document.getElementById('fonts').value + ";");<br>  secondoh=secondoh.replace("font-style:" + lastfontw + ";","font-style:" + document.getElementById('fontw').value + ";");<br>  secondoh=secondoh.replace("color:" + lastfontc + ";","color:" + document.getElementById('fontc').value + ";");<br>  secondoh=secondoh.replace("font-family:" + fmap(lastfontf) + ";","font-family:" + document.getElementById('fontf').value + ";");<br>  secondoh=secondoh.replace("font-size:" + lastfonts + ";","font-size:" + document.getElementById('fonts').value + ";");<br>  secondoh=secondoh.replace("font-style:" + lastfontw + ";","font-style:" + document.getElementById('fontw').value + ";");<br>  secondoh=secondoh.replace("color:" + lastfontc + ";","color:" + document.getElementById('fontc').value + ";");<br><br>  //alert("color:" + fontc + ";" + "," + "color:" + document.getElementById('fontc').value + ";" + " " + secondoh); <br>  dscriptih=dscriptih.replace('&lt;/style&gt;', ' .mboard' + nextsuffix + ' { width: calc(85% - ' + x + 'px); } &lt;/style&gt;');<br>  document.getElementById('dscript').innerHTML=dscriptih;<br>  focusto="motherboard" + nextsuffix;<br>  nextsuffix='' + eval(eval(nextsuffix) + 1);<br>  return secondoh;<br>}<br><br>function clicksup(event) {<br>  //alert('You clicked');<br>       var thissuffix=nextsuffix;<br>       var prevval='';<br>       var prevo=null;<br>       if (document.getElementById(focusto)) {<br>       prevval=document.getElementById(focusto).value;<br>       prevo=document.getElementById(focusto);<br>       }<br>       if (event.clientX || event.clientY) {<br>       x = event.clientX;<br>       y = event.clientY;<br>  mousePosition.x = x;<br>  mousePosition.y = y;<br>       } else {<br>       x = event.pageX;<br>       y = event.pageY;<br>  mousePosition.x = x;<br>  mousePosition.y = y;<br>       }<br>                        taipos=0;<br>                        tajpos=0;<br>       if (1 == 1) {<br>       //if (document.getElementById('d' + thissuffix)) alert(prevval + 'should be okay if prefixed by something');<br>       document.getElementById('d' + thissuffix).innerHTML=clone() + "&lt;div id='d" + eval(1 + eval(thissuffix)) + "'&gt;&lt;/div&gt;";<br>       } else {<br>       document.getElementById('myform').innerHTML+=clone();<br>       }<br>       if (document.getElementById(focusto)) {<br>       if (document.getElementById(focusto).title) {<br>       document.getElementById(focusto).title=document.getElementById(focusto).title.replace("font-family:" + fmap(fontf) + ";","font-family:" + fmap(document.getElementById('fontf').value) + ";");<br>       document.getElementById(focusto).title=document.getElementById(focusto).title.replace("font-size:" + fonts + ";","font-size:" + document.getElementById('fonts').value + ";");<br>       document.getElementById(focusto).title=document.getElementById(focusto).title.replace("font-style:" + fontw + ";","font-style:" + document.getElementById('fontw').value + ";");<br>       document.getElementById(focusto).title=document.getElementById(focusto).title.replace("color:" + fontc + ";","color:" + document.getElementById('fontc').value + ";");<br>       document.getElementById(focusto).title=document.getElementById(focusto).title.replace("font-family:" + fmap(lastfontf) + ";","font-family:" + fmap(document.getElementById('fontf').value) + ";");<br>       document.getElementById(focusto).title=document.getElementById(focusto).title.replace("font-size:" + lastfonts + ";","font-size:" + document.getElementById('fonts').value + ";");<br>       document.getElementById(focusto).title=document.getElementById(focusto).title.replace("font-style:" + lastfontw + ";","font-style:" + document.getElementById('fontw').value + ";");<br>       document.getElementById(focusto).title=document.getElementById(focusto).title.replace("color:" + lastfontc + ";","color:" + document.getElementById('fontc').value + ";");<br>       ael(document.getElementById(focusto));<br>       }<br>       }<br>       //alert(prevo.id + ' ... ' + prevval);<br>       //prevo.value=prevval;<br>       if (prevo != null) prevo.innerHTML=prevval;<br>       dofocus();<br>       //alert(document.getElementById('myform').innerHTML);<br>}<br><br>function dumclickmysup(event) {<br>}<br><br>function pbtas() {<br>    document.getElementById('ccanvas').style.zIndex=-9; <br>    document.getElementById('dcanvas').style.zIndex=-9; <br>    document.getElementById('dcanvas').style.display='none';<br>    document.getElementById('ccanvas').style.display='none';<br>    document.getElementById('icanvas').style.display='none';<br>    document.getElementById('jcanvas').style.display='none';<br>    document.getElementById('kcanvas').style.display='none';<br>    document.getElementById('lcanvas').style.display='none';<br>    document.getElementById('mcanvas').style.display='none';<br>    document.getElementById('ncanvas').style.display='none';<br>    document.getElementById('nrotate').style.display='none';<br>    document.getElementById('ndrotate').style.display='none';<br>    document.getElementById('dddcanvas').style.display='none';<br>    document.getElementById('bcanvas').value='Canvas';<br>}<br><br>function preotestcanvas() {<br>  if (cco &gt; 0) {<br>    cco--;<br>  }<br>  if (cco &gt; 0) setTimeout(preotestcanvas, 100);<br>}<br><br>function pretestcanvas() {<br>  if (ccounter &gt; 0) {<br>    ccounter--;<br>  }<br>  if (ccounter &gt; 0) setTimeout(pretestcanvas, 100);<br>}<br><br>function testcanvas(wcan,isc) {<br>  if (ccounter == 0 && isc != 0) {<br>    ccounter=10;<br>    setTimeout(pretestcanvas, 100);<br>  } else if (cco == 0 && isc == 0) {<br>    cco=10; //20;<br>    setTimeout(preotestcanvas, 100);<br>  } else if (ccounter &gt; 5 && isc != 0) {<br>    //wcan.style.zIndex=-9; <br>    //wcan.style.display='none';<br>    pbtas();<br>  } else if (cco &gt; 5 && isc == 0) {<br>    //wcan.style.zIndex=-9; <br>    //wcan.style.display='none';<br>    pbtas();<br>  } <br>}<br><br>function ael(ota) {<br> var cevent='keypress';<br> if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1 && 1 == 2) {<br>  cevent='keydown';<br>  ota.addEventListener('keypress', function(keyPressEvent){<br>  var xbits=[];<br>  if (keyUpEvent.shiftKey) {<br>  iuc=true;<br>  } <br>  if (keyPressEvent.keyCode &gt;= 32 && !keyPressEvent.shiftKey) {<br>  iuc=false;<br>  } <br>  if (keyPressEvent.which !== 0) {<br>  if (iuc && keyUpEvent.keyCode &gt;= 32 && 1 == 1) {<br>    gotakeypress=String.fromCharCode(keyPressEvent.keyCode).toUpperCase();<br>  } else if (keyUpEvent.keyCode &gt;= 32 && 1 == 1) {<br>    gotakeypress=String.fromCharCode(keyPressEvent.keyCode).toLowerCase();<br>  } <br>  }<br>}, false);<br>  <br>  }<br><br> ota.addEventListener(cevent, function(keyUpEvent){<br>  //var divLog = document.querySelector('#log'),<br>  //    log = 'x:' + mousePosition.x + ' * y: ' + mousePosition.y,<br>  //    p = document.createElement('p').innerHTM = log;<br>  // divLog.appendChild(p);<br>  //var valuec = this.value + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode));<br>  var xbits=[];<br>  if (keyUpEvent.shiftKey) {<br>  iuc=true;<br>  } <br>  if ((keyUpEvent.which || keyUpEvent.keyCode) &gt;= 32 && !keyUpEvent.shiftKey) {<br>  iuc=false;<br>  } <br>  if (iuc && (keyUpEvent.which || keyUpEvent.keyCode) &gt;= 32 && 1 == 1) {<br>  if (taipos &gt; 0) mousePosition.x += eval(eval(5) * eval(document.getElementById('fonts').value.split('p')[0]) / eval(8));<br>  taipos++;<br>  if (dynamiccanvas && local_font != '') {<br>    //alert(0);<br>    if (local_font.indexOf(".000000000" + ("000" + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toUpperCase().charCodeAt()).slice(-3) + ",") != -1) {<br>    xbits=local_font.split(".000000000" + ("000" + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toUpperCase().charCodeAt()).slice(-3) + ",");<br>    } else if (local_font.indexOf(".000000000" + ("000" + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toUpperCase().charCodeAt()).slice(-3) + ";") != -1) {<br>    xbits=local_font.split(".000000000" + ("000" + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toUpperCase().charCodeAt()).slice(-3) + ";");<br>    }<br>    //alert(2);<br>    local_coords="";<br>    if (xbits.length &gt; 1) {<br>     local_coords=xbits[1].split(".0000000001")[0].split(".0000000000")[0].split(".0000000002")[0].split(".0000000003")[0].split(".0000000004")[0].split(".0000000005")[0].split(".0000000006")[0].split(".0000000007")[0].split(".0000000008")[0].split(".0000000009")[0].replace(/\;/g,',-');<br>    //alert(4);<br>    }<br>    if (gotakeypress != '') {<br>    plotit(gotakeypress, mousePosition.x, mousePosition.y);<br>    } else {<br>    plotit(String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toUpperCase(), mousePosition.x, mousePosition.y);<br>    }<br>  }<br>  //document.title=(gotakeypress + '-' + (keyUpEvent.which || keyUpEvent.keyCode) + ':' + local_coords + ' pos:(' + eval(taipos - taipos) + ',' + tajpos + ')Value:' + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toUpperCase() + 'x:' + mousePosition.x + 'y:' + mousePosition.y + ' ' + local_coords + ' ' + local_font);<br>  } else if (iuc && (keyUpEvent.which || keyUpEvent.keyCode) &gt;= 32) {<br>  //document.title=('pos:(' + taipos + ',' + tajpos + ')Value:' + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toUpperCase() + 'x:' + mousePosition.x + 'y:' + mousePosition.y + ' ' + local_coords + ' ' + local_font);<br>  taipos++;<br>  } else if ((keyUpEvent.which || keyUpEvent.keyCode) &gt;= 32 && 1 == 1) {<br>  if (taipos &gt; 0) mousePosition.x += eval(eval(5) * eval(document.getElementById('fonts').value.split('p')[0]) / eval(8));<br>  taipos++;<br>  if (dynamiccanvas && local_font != '') {<br>    //alert(10 + ' ... ' + ".000000000" + ("000" + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toLowerCase().charCodeAt()).slice(-3));<br>    if (local_font.indexOf(".000000000" + ("000" + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toLowerCase().charCodeAt()).slice(-3) + ",") != -1) {<br>    xbits=local_font.split(".000000000" + ("000" + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toLowerCase().charCodeAt()).slice(-3) + ",");<br>    } else if (local_font.indexOf(".000000000" + ("000" + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toLowerCase().charCodeAt()).slice(-3) + ";") != -1) {<br>    xbits=local_font.split(".000000000" + ("000" + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toLowerCase().charCodeAt()).slice(-3) + ";");<br>    }<br>    //alert(110 + ' +++ ' + local_font);<br>    local_coords="";<br>    if (xbits.length &gt; 1) {<br>     local_coords=xbits[1].split(".0000000001")[0].split(".0000000000")[0].split(".0000000002")[0].split(".0000000003")[0].split(".0000000004")[0].split(".0000000005")[0].split(".0000000006")[0].split(".0000000007")[0].split(".0000000008")[0].split(".0000000009")[0].replace(/\;/g,',-');<br>    }<br>    if (gotakeypress != '') {<br>    plotit(gotakeypress, mousePosition.x, mousePosition.y);<br>    } else {<br>    plotit(String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toLowerCase(), mousePosition.x, mousePosition.y);<br>    }<br>  }<br>  //document.title=(gotakeypress + '-' + (keyUpEvent.which || keyUpEvent.keyCode) + ':' + local_coords + ' pos:(' + eval(taipos - taipos) + ',' + tajpos + ')value:' + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toLowerCase() + 'x:' + mousePosition.x + 'y:' + mousePosition.y + ' ' + local_coords + ' ' + local_font);<br>  } else if ((keyUpEvent.which || keyUpEvent.keyCode) &gt;= 32) {<br>  //document.title=('pos:(' + taipos + ',' + tajpos + ')value:' + String.fromCharCode((keyUpEvent.which || keyUpEvent.keyCode)).toLowerCase() + 'x:' + mousePosition.x + 'y:' + mousePosition.y + ' ' + local_coords + ' ' + local_font);<br>  taipos++;<br>  } else if ((keyUpEvent.which || keyUpEvent.keyCode) == 13 && 1 == 1) {<br>  if (taipos &gt; 0) mousePosition.x -= eval(eval(-1 + taipos) * eval(5) * eval(document.getElementById('fonts').value.split('p')[0]) / eval(8));<br>  mousePosition.y += eval(document.getElementById('fonts').value.split('p')[0]);<br>  tajpos=0; //++;<br>  taipos=0;<br>  } else if ((keyUpEvent.which || keyUpEvent.keyCode) == 13) {<br>  tajpos++;<br>  taipos=0;<br>  }<br>  gotakeypress='';<br>}, false);<br><br>}<br><br>function dofocus() {<br>  var val='', value=[];<br>  if (document.getElementById('dcanvas')) {<br>   if (document.getElementById('dcanvas').innerHTML == '') {<br><br>// Thanks to https://stackoverflow.com/questions/7562503/getting-mouse-position-in-keyboard-event<br>document.addEventListener('mousemove', function(mouseMoveEvent){<br> if (mouseMoveEvent.pageX) {<br>  //mousePosition.x = mouseMoveEvent.pageX;<br>  //mousePosition.y = mouseMoveEvent.pageY;<br>                 taipos=taipos;<br>                 tajpos=tajpos;<br> } else {<br>  //mousePosition.x = mouseMoveEvent.clientX;<br>  //mousePosition.y = mouseMoveEvent.clientY;<br>                 taipos=taipos;<br>                 tajpos=tajpos;<br> }<br>}, false);<br><br><br>ael(document.getElementById(focusto));<br><br>//document.addEventListener('keydown', function(keyDownEvent){<br>// iuc=false; <br>//}, false);<br><br>    if (window.localStorage) {<br>    for (var iq in window.localStorage) {<br>     val = localStorage.getItem(iq); <br>     if (val) {<br>     //value = val.split(","); //splitting string inside array to get name<br>     //alert(iq);<br>     if (iq.substring(0,3) == 'tp_') {<br>        document.getElementById('ssaveas').innerHTML+='&lt;option value="' + iq.substring(3) + '"&gt;Recall "' + iq.substring(3) + '"&lt;/option&gt;';<br>     }<br>     }<br>    }<br>    }<br>    var celem_style_width='' + eval(window.getComputedStyle(document.getElementById('ibody'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85) + 'px';<br>    var celem_style_width100='' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 1.00) + 'px';<br>    var celem_width='' + eval(window.getComputedStyle(document.getElementById('ibody'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85);<br>    //celem_width='' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 1.00) + 'px'; //0.85);<br>    var celem_style_height='' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';<br>    var celem_height='' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';<br>    document.getElementById('dcanvas').innerHTML="&lt;canvas onfocus=\"testcanvas(this,0);\" onclick=\"testcanvas(this,1);\" title=\"Double click me to reveal textareas again\" id=ccanvas style=\"position:absolute;display:block;z-index:-9;top:1500px;left:0px;width:100%;height:100%;\"&gt;&lt;/canvas&gt;";<br>    document.getElementById('ddcanvas').innerHTML="&lt;br&gt;&lt;span id=dddcanvas style=display:none;&gt;&nbsp;&nbsp;&nbsp;&nbsp;Canvas Image: &nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "');  imgwo.document.write('&lt;html&gt;&lt;b' + 'ody&gt;&lt;img title=Canvas src=' + this.src + '&gt;&lt;/img&gt;&lt;/b' + 'ody&gt;&lt;/html&gt;');\" title=\"Image of canvas to left in new window\" id=icanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''&gt;&lt;/img&gt;&lt;img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "');  imgwo.document.write('&lt;html&gt;&lt;b' + 'ody&gt;&lt;img style=background-color:#000000; title=Canvas src=' + this.src + '&gt;&lt;/img&gt;&lt;/b' + 'ody&gt;&lt;/html&gt;');\" title=\"Inverse image of canvas to left in new window\" id=jcanvas style='width:45px;display:none;border:1px solid green;background-color:#000000;' src=''&gt;&lt;/img&gt;&lt;img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "');  imgwo.document.write('&lt;html&gt;&lt;b' + 'ody&gt;&lt;img title=Canvas src=' + this.src + '&gt;&lt;/img&gt;&lt;/b' + 'ody&gt;&lt;/html&gt;');\" title=\"Grayscale image of canvas to left in new window\" id=kcanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''&gt;&lt;/img&gt;&lt;img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "');  imgwo.document.write('&lt;html&gt;&lt;b' + 'ody&gt;&lt;img title=Canvas src=' + this.src + '&gt;&lt;/img&gt;&lt;/b' + 'ody&gt;&lt;/html&gt;');\" title=\"Flipped image of canvas to left in new window\" id=lcanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''&gt;&lt;/img&gt;&lt;img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "');  imgwo.document.write('&lt;html&gt;&lt;b' + 'ody&gt;&lt;img title=Canvas src=' + this.src + '&gt;&lt;/img&gt;&lt;/b' + 'ody&gt;&lt;/html&gt;');\" title=\"Flopped image of canvas to left in new window\" id=mcanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''&gt;&lt;/img&gt;&nbsp;&lt;div id=ndrotate style=display:none;&gt;Clockwise &lt;input onchange=rotate(1); onblur=rotate(1); step=1 value=0 min=0 max=359 type=number id=nrotate style=width:40px;display:none;&gt;&lt;/input&gt;&deg;&lt;/div&gt;&nbsp;&lt;img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + eval(2 * celem_width) + ",height=" + eval(2 * celem_height) + "');  imgwo.document.write('&lt;html&gt;&lt;b' + 'ody&gt;&lt;img title=Canvas src=' + this.src + '&gt;&lt;/img&gt;&lt;/b' + 'ody&gt;&lt;/html&gt;');\" title=\"Rotated image of canvas to left in new window\" id=ncanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''&gt;&lt;/img&gt;&lt;br&gt;&lt;div id='dpixel' style='display:none;'&gt;&lt;input style=display:none; type=button id=inraster value=Rasterize onclick=\"  if (learnfont) { setTimeout(pib,4000); learnfont=false; }   document.getElementById('ipixel').style.display='none';   document.getElementById('mysubmit').click(); document.getElementById('ipixel').style.top='0px'; document.getElementById('ipixel').style.zIndex='99'; document.getElementById('ipixel').style.display='block';  location.href='#ipixel'; \"&lt;/input&gt;&lt;hr&gt;&lt;/div&gt;&lt;br&gt;    ";<br>    celem=document.getElementById('ccanvas');<br>    ccontext=celem.getContext("2d");<br>    celem.style.width=celem_style_width; //'' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85) + 'px';<br>    celem.width=celem_style_width; //'' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85);<br>    celem.style.height=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';<br>    celem.height=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh',''));<br>    //alert(document.getElementById('ibody').style.width + ' vs ' + celem_style_width + ' ' + celem_style_width100 + ' ' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85));<br>//alert('Canvas clear');<br>    document.getElementById('dcanvas').style.width=celem_style_width; <br>    document.getElementById('dcanvas').style.height=celem_style_height; <br>    //document.getElementById('dpixel').style.width=celem_style_width; //'' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85) + 'px';<br>    //document.getElementById('dpixel').style.height=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';<br>    document.getElementById('ipixel').style.width=celem_style_width; //'' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85) + 'px';<br>    document.getElementById('ipixel').style.height=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';<br>   }<br>  }<br>  if (firstoh == '') {<br>    if (document.getElementById('motherboard2')) {<br>    document.getElementById('motherboard').value=document.getElementById('motherboard').innerHTML.replace(/\&lt\;/g,"&lt;").replace(/\&gt\;/g,"&gt;");<br>    document.getElementById('motherboard').innerHTML='';<br>    firstoh="&lt;textarea alt='font-family:Arial;font-size:12px;color:#000000;font-style:normal;' onclick='clicksup(event);' title='Base Textarea to type away on or click/touch to reposition text' style='font-family:Arial;font-size:12px;font-style:normal;color:#000000;border:0px solid yellow;border-right:1px solid red;z-index:1;position:absolute;background-color:transparent;top:0px;left:0px;height:100vh;' id='moth" + "erboard' name='moth" + "erboard' cols=300 rows=300&gt;" + "&lt;/textarea&gt;";<br>    while (document.getElementById('motherboard' + nextsuffix)) {<br>    document.getElementById('motherboard' + nextsuffix).value=document.getElementById('motherboard' + nextsuffix).innerHTML.replace(/\&lt\;/g,"&lt;").replace(/\&gt\;/g,"&gt;");<br>    document.getElementById('motherboard' + nextsuffix).innerHTML='';<br>    focusto="motherboard" + nextsuffix;<br>    nextsuffix='' + eval(eval(nextsuffix) + 1);<br>    }<br>    firstoh=document.getElementById(focusto).outerHTML;<br>    document.getElementById('fontf').focus();<br>    } else {<br>    cmode=false;<br>    if (document.getElementById(focusto)) {<br>      firstoh=document.getElementById(focusto).outerHTML;<br>    } else {<br>    firstoh="&lt;textarea alt='font-family:Arial;font-size:12px;color:#000000;font-style:normal;' onclick='clicksup(event);' title='Base Textarea to type away on or click/touch to reposition text' style='font-family:Arial;font-size:12px;font-style:normal;color:#000000;border:0px solid yellow;border-right:1px solid red;z-index:1;position:absolute;background-color:transparent;top:0px;left:0px;height:100vh;' id='moth" + "erboard' name='moth" + "erboard' cols=300 rows=300&gt;" + "&lt;/textarea&gt;";<br>    }<br>    //alert(firstoh);<br>    if (document.getElementById(focusto)) {<br>    document.getElementById(focusto).style.width='85%';<br>    document.getElementById(focusto).style.height='100vh';<br>    document.getElementById(focusto).focus();<br>    }<br>    }<br>  }<br>}<br><br>function altit(tv,ti) {<br>  if (document.getElementById(focusto)) {<br>  //alert(43 + ' ' + ti);<br>  if (document.getElementById(focusto).title) {<br>  //alert(ti);<br>  if (ti == 'fontf') {<br>     document.getElementById(focusto).style.fontFamily=tv;<br>     document.getElementById(focusto).title=document.getElementById(focusto).title.replace(/\:\ /g,':').replace("font-family:" + fmap(fontf) + ";","font-family:" + fmap(tv) + ";");<br>     document.getElementById(focusto).title=document.getElementById(focusto).title.replace(/\:\ /g,':').replace("font-family:" + fmap(lastfontf) + ";","font-family:" + fmap(tv) + ";");<br> //alert(document.getElementById(focusto).title);<br>     lastfontf=tv;<br>  } else if (ti == 'fonts') {<br>     document.getElementById(focusto).style.fontSize=tv;<br>     document.getElementById(focusto).title=document.getElementById(focusto).title.replace(/\:\ /g,':').replace("font-size:" + fonts + ";","font-size:" + tv + ";");<br>     document.getElementById(focusto).title=document.getElementById(focusto).title.replace(/\:\ /g,':').replace("font-size:" + lastfonts + ";","font-size:" + tv + ";");<br> //alert(fonts + ' ... ' + tv + ' +++ ' + document.getElementById(focusto).title);<br>     lastfonts=tv;<br>  } else if (ti == 'fontc') {<br>     document.getElementById(focusto).style.color=tv;<br>     document.getElementById(focusto).title=document.getElementById(focusto).title.replace(/\:\ /g,':').replace("color:" + fontc + ";","color:" + tv + ";");<br>     document.getElementById(focusto).title=document.getElementById(focusto).title.replace(/\:\ /g,':').replace("color:" + lastfontc + ";","color:" + tv + ";");<br> //alert(document.getElementById(focusto).title);<br>     lastfontc=tv;<br>  } else if (ti == 'fontw') {<br>     document.getElementById(focusto).style.fontStyle=tv;<br>     document.getElementById(focusto).title=document.getElementById(focusto).title.replace(/\:\ /g,':').replace("font-style:" + fontw + ";","font-style:" + tv + ";");<br>     document.getElementById(focusto).title=document.getElementById(focusto).title.replace(/\:\ /g,':').replace("font-style:" + lastfontw + ";","font-style:" + tv + ";");<br> //alert(document.getElementById(focusto).title);<br>     lastfontw=tv;<br>     document.getElementById('fontf').focus();<br>  }<br>  namefont=(lastfontf + '_' + lastfonts + '_' + lastfontw).replace(/\ /g,'_'); <br>  }<br>  }<br>  return tv;<br>}<br><br>function lotsforthefuture(oform) {<br>  // Lots for later<br>  // End of ... Lots for later<br>  return true;<br>}<br><br>function updd(oi,oiv) {<br>//alert(oiv);<br>  oi.innerHTML=oiv;<br>  oi.value=oi.innerHTML;<br>  oi.innerHTML=oiv;<br>}<br><br>function upd(oi,oiv) {<br>  oi.innerHTML=oiv;<br>  oi.value=oi.innerHTML;<br>  oi.innerHTML='';<br>}<br><br>function htmlout(pcent) { <br> var newo='', tao=[], taoih=[], itas, ihis='', tdelim='', doemail=false, dopdf=false, dodownload=false, nump=0;<br> var xfontf='Arial', cf='',clines,cy=0,ic;<br> var xfonts='12px', lhplace='', ctas=[];<br> var xfontc='0~~0~~0';<br> var xfontw='normal', twelve=12;<br> var xred=0, xgreen=0, xblue=0;<br> document.getElementById('htmltp').value='';<br> if (pcent.indexOf('.000000%') == -1 && pcent.indexOf('.00000%') == -1 && document.getElementById('bcanvas').value != 'Canvas') {<br>    //alert(65);<br>    document.getElementById('bcanvas').click();<br> }<br> if (pcent.indexOf('.000000') != -1) {<br>    if (newo == '') {<br>    newo=pcent.split('%')[1];<br>    pcent=pcent.replace('%' + newo, '%');<br>    }<br>    if (localStorage) {<br>     if (localStorage.getItem('tp_' + newo)) {<br>       //alert(newo);<br>       var bih=decodeURIComponent(localStorage.getItem('tp_' + newo)); //.replace(/\&lt\;/g,'&lt;').replace(/\&gt\;/g,'&gt;');<br>       //alert(bih);<br>       document.getElementById('myform').innerHTML=bih;<br>    if (document.getElementById('motherboard2')) {<br>    document.getElementById('motherboard').value=document.getElementById('motherboard').innerHTML.replace(/\&lt\;/g,"&lt;").replace(/\&gt\;/g,"&gt;");<br>    document.getElementById('motherboard').innerHTML='';<br>    firstoh="&lt;textarea alt='font-family:Arial;font-size:12px;color:#000000;font-style:normal;' onclick='clicksup(event);' title='Base Textarea to type away on or click/touch to reposition text' style='font-family:Arial;font-size:12px;font-style:normal;color:#000000;border:0px solid yellow;border-right:1px solid red;z-index:1;position:absolute;background-color:transparent;top:0px;left:0px;height:100vh;' id='moth" + "erboard' name='moth" + "erboard' cols=300 rows=300&gt;" + "&lt;/textarea&gt;";<br>    while (document.getElementById('motherboard' + nextsuffix)) {<br>    document.getElementById('motherboard' + nextsuffix).value=document.getElementById('motherboard' + nextsuffix).innerHTML.replace(/\&lt\;/g,"&lt;").replace(/\&gt\;/g,"&gt;");<br>    document.getElementById('motherboard' + nextsuffix).innerHTML='';<br>    focusto="motherboard" + nextsuffix;<br>    nextsuffix='' + eval(eval(nextsuffix) + 1);<br>    }<br>    firstoh=document.getElementById(focusto).outerHTML;<br>    document.getElementById('fontf').focus();<br>    }<br>       return '';<br>     }<br>    }<br>    return '';<br> }<br> <br><br> <br> var tas=document.getElementsByTagName('textarea');<br> //alert(tas[eval(-1 + tas.length)].value + ' vs ' + tas[eval(-1 + tas.length)].innerHTML + ' ... ' + ctas[eval(-2 + tas.length)]);<br> for (itas=0;itas&lt;(eval(0 + tas.length));itas++) {<br>   ihis='';<br>   if (tas[itas].value != '' && tas[itas].innerHTML != '') {<br>     ihis=tas[itas].innerHTML;<br>     tao.push(tas[itas]);<br>     taoih.push(tas[itas].innerHTML); <br>     //if (ctas.length &gt; 0) alert(tas[itas].innerHTML + ' +++ ' + tas[itas].value);<br>     tas[itas].innerHTML='';<br>   } else if (tas[itas].innerHTML != '') {<br>     ihis=tas[itas].innerHTML;<br>     //if (ctas.length &gt; 0) alert(tas[itas].innerHTML + ' ++.+ ' + tas[itas].value);<br>   } else if (tas[itas].value != '') {<br>     ihis=tas[itas].value;<br>     //if (ctas.length &gt; 0) alert(tas[itas].innerHTML + ' ++..+ ' + tas[itas].value);<br>   } else if (ctas.length &gt; eval(itas - 1) && itas &gt; 0) {<br>     //alert(itas + ' ... ' + ctas[eval(itas - 1)]);<br>     if (ctas[eval(itas - 1)].indexOf('&gt;') != -1) {<br>       tao.push(tas[itas]);<br>       ihis=ctas[eval(itas - 1)].split('&gt;')[eval(-1 + ctas[eval(itas - 1)].split('&gt;').length)];<br>       taoih.push(ihis); <br>     //alert(ihis);<br>     }<br>   }<br>   //if (itas &gt; 0) alert('ihis=' + ihis);<br>   if (ihis != '') {<br> if (pcent.indexOf('.00000000') != -1) {<br> } else if (pcent.indexOf('.0000000') != -1) {<br> } else if (pcent.indexOf('.000000') != -1) {<br>    if (newo == '') {<br>    newo=pcent.split('%')[1];<br>    pcent=pcent.replace('%' + newo, '%');<br>    }<br>    if (localStorage) {<br>     if (localStorage.getItem('tp_' + newo)) {<br>       //alert(newo);<br>       var bih=decodeURIComponent(localStorage.getItem('tp_' + newo)); //.replace(/\&lt\;/g,'&lt;').replace(/\&gt\;/g,'&gt;');<br>       //alert(bih);<br>       document.body.innerHTML=bih;<br>       return '';<br>     }<br>    }<br>    return '';<br> } else if (pcent.indexOf('.00000') != -1) {<br>    if (newo == '') {<br>    newo=pcent.split('%')[1];<br>    pcent=pcent.replace('%' + newo, '%');<br>    }<br> } else if (pcent.indexOf('.0000') != -1) {<br>       //document.title+=' ... ' + local_font;<br>       //alert(cccmd + ' ' + local_font);<br>    if (lhplace == '') {<br>    //alert(14);<br>    document.getElementById('icanvas').style.display='inline-block';<br>    document.getElementById('dddcanvas').style.display='inline-block';<br>    document.getElementById('dcanvas').style.position='absolute'<br>    document.getElementById('dcanvas').style.top='0px';<br>    document.getElementById('dcanvas').style.left='0px';<br>    //alert(15);<br>    //document.getElementById('dcanvas').style.width=celem.style.width;<br>    //document.getElementById('dcanvas').style.height=celem.style.height;<br>    document.getElementById('dcanvas').style.zIndex='20';<br>    document.getElementById('dcanvas').style.display='block';<br>    //alert(16);<br>    celem.style.top='0px';<br>    celem.style.left='0px';<br>    //alert(17);<br>    celem.width=eval(('' + celem.style.width).replace('px',''));<br>    celem.height=eval(('' + celem.style.height).replace('px',''));<br> //alert(18);<br>    celem.style.backgroundColor='#f0f0f0';<br>    celem.style.border='1px solid red';<br>    celem.style.zIndex='20';<br>    celem.style.display='block';<br>    //alert(19);<br>    }<br>    if (dynamiccanvas) {<br>    if (nump &lt; ccmds.length) {<br>    if (ccmds.length &gt; 1) {<br>       //alert(cccmd + ' ' + local_font);<br>       for (var jc=0; jc&lt;ccmds.length; jc++) {<br>         //alert(ccmds[jc]);<br>         eval(ccmds[jc]);<br>         nump=eval(1 + jc);<br>       }<br>       //ccmds=[];<br>    }<br>    }<br>    } else {<br>    if (tas[itas].outerHTML.indexOf('font-family:') != -1) xfontf=fmap((tas[itas].outerHTML + ';').split('ont-family:')[1].split(';')[0]);<br>    if (tas[itas].outerHTML.indexOf('font-style:') != -1) xfontw=(tas[itas].outerHTML + ';').split('ont-style:')[1].split(';')[0];<br>    if (tas[itas].outerHTML.indexOf('font-size:') != -1) xfonts=(tas[itas].outerHTML + ';').split('ont-size:')[1].split(';')[0];<br>    cf = xfontw.replace('normal','') + " " + xfonts + " " + xfontf;<br>    twelve=eval(xfonts.split('px')[0]);<br>    ccontext.font = cf;<br>    //alert(cf + ' ... ' + tas[itas].outerHTML);<br>    if (tas[itas].outerHTML.indexOf(';color:#') != -1) {<br>    //alert(celem.width + ' #' + tas[itas].outerHTML.split('olor:#')[1].split(';')[0]);<br>    ccontext.fillStyle='#' + tas[itas].outerHTML.split(';color:#')[1].split(';')[0];<br>    }<br>    cy=eval(eval(tas[itas].style.top.replace('px','')) / 1 + 12);<br>    clines=ihis.split(String.fromCharCode(10));<br>    for (ic=0;ic&lt;clines.length;ic++) {<br>    //if (itas &gt; 0) alert(clines[ic]);<br>    ccontext.fillText(clines[ic],eval(eval(tas[itas].style.left.replace('px','')) / 1),cy);<br>    cy+=twelve;<br>    }<br>    }<br>    durl=celem.toDataURL('image/png'); //jpeg',0.7);<br>    //alert(durl);<br>    document.getElementById('icanvas').src=durl;<br>    document.getElementById('icanvas').style.backgroundImage="URL('" + durl + "')";<br>    setTimeout(inverse,2000);<br>    lhplace='#ccanvas';<br> } else if (pcent.indexOf('.000') != -1) {<br>    dopdf=true;<br>    dodownload=false;<br>    doemail=false;<br>    if (document.getElementById('htmltp').value == "") document.getElementById('htmltp').value="new``";<br>    // string family [, string style [, float size]]<br>    // font-family:Arial;font-size:12px;color:#000000;font-style:normal;  B I U nothing<br>    if (tas[itas].outerHTML.indexOf('font-family:') != -1) xfontf=fmap((tas[itas].outerHTML + ';').split('ont-family:')[1].split(';')[0]);<br>    if (tas[itas].outerHTML.indexOf('font-style:') != -1) xfontw=(tas[itas].outerHTML + ';').split('ont-style:')[1].split(';')[0];<br>    if (tas[itas].outerHTML.indexOf('font-size:') != -1) xfonts=(tas[itas].outerHTML + ';').split('ont-size:')[1].split(';')[0];<br>    document.getElementById('htmltp').value+=tdelim + xfontf + '~`' + xfontw.replace('normal','').replace('bold','B').replace('italic','I').replace('underline','U') + '~`' + xfonts;<br>    tdelim='``';<br>    if (tas[itas].outerHTML.indexOf('color:#') != -1) {<br>    xred=eval(eval(eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(0,1)) * 16) + eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(1,2)));<br>    xgreen=eval(eval(eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(2,3)) * 16) + eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(3,4)));<br>    xblue=eval(eval(eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(4,5)) * 16) + eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(5,6)));<br>    document.getElementById('htmltp').value+=tdelim + xred + '~~' + xgreen + '~~' + xblue;<br>    tdelim='``';<br>    } <br>    document.getElementById('htmltp').value+=tdelim + eval(eval(tas[itas].style.left.replace('px','')) / 2) + '`~' + eval(eval(tas[itas].style.top.replace('px','')) / 2) + '`~' + ihis;<br>    tdelim='``';<br> } else if (pcent.indexOf('.00') != -1) {<br>    dopdf=true;<br>    dodownload=true;<br>    doemail=false;<br>    if (document.getElementById('htmltp').value == "") document.getElementById('htmltp').value="New``";<br>    // string family [, string style [, float size]]<br>    // font-family:Arial;font-size:12px;color:#000000;font-style:normal;  B I U nothing<br>    if (tas[itas].outerHTML.indexOf('font-family:') != -1) xfontf=fmap((tas[itas].outerHTML + ';').split('ont-family:')[1].split(';')[0]);<br>    if (tas[itas].outerHTML.indexOf('font-style:') != -1) xfontw=(tas[itas].outerHTML + ';').split('ont-style:')[1].split(';')[0];<br>    if (tas[itas].outerHTML.indexOf('font-size:') != -1) xfonts=(tas[itas].outerHTML + ';').split('ont-size:')[1].split(';')[0];<br>    document.getElementById('htmltp').value+=tdelim + xfontf + '~`' + xfontw.replace('normal','').replace('bold','B').replace('italic','I').replace('underline','U') + '~`' + xfonts;<br>    tdelim='``';<br>    if (tas[itas].outerHTML.indexOf('color:#') != -1) {<br>    xred=eval(eval(eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(0,1)) * 16) + eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(1,2)));<br>    xgreen=eval(eval(eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(2,3)) * 16) + eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(3,4)));<br>    xblue=eval(eval(eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(4,5)) * 16) + eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(5,6)));<br>    document.getElementById('htmltp').value+=tdelim + xred + '~~' + xgreen + '~~' + xblue;<br>    tdelim='``';<br>    } <br>    document.getElementById('htmltp').value+=tdelim + eval(eval(tas[itas].style.left.replace('px','')) / 2) + '`~' + eval(eval(tas[itas].style.top.replace('px','')) / 2) + '`~' + ihis;<br>    tdelim='``';<br>} else if (pcent.indexOf('.0') != -1) {<br>    dopdf=true;<br>    dodownload=true;<br>    doemail=true;<br>    if (document.getElementById('htmltp').value == "") document.getElementById('htmltp').value="New``";<br>    // string family [, string style [, float size]]<br>    // font-family:Arial;font-size:12px;color:#000000;font-style:normal;  B I U nothing<br>    if (tas[itas].outerHTML.indexOf('font-family:') != -1) xfontf=fmap((tas[itas].outerHTML + ';').split('ont-family:')[1].split(';')[0]);<br>    if (tas[itas].outerHTML.indexOf('font-style:') != -1) xfontw=(tas[itas].outerHTML + ';').split('ont-style:')[1].split(';')[0];<br>    if (tas[itas].outerHTML.indexOf('font-size:') != -1) xfonts=(tas[itas].outerHTML + ';').split('ont-size:')[1].split(';')[0];<br>    document.getElementById('htmltp').value+=tdelim + xfontf + '~`' + xfontw.replace('normal','').replace('bold','B').replace('italic','I').replace('underline','U') + '~`' + xfonts;<br>    tdelim='``';<br>    if (tas[itas].outerHTML.indexOf('color:#') != -1) {<br>    xred=eval(eval(eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(0,1)) * 16) + eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(1,2)));<br>    xgreen=eval(eval(eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(2,3)) * 16) + eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(3,4)));<br>    xblue=eval(eval(eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(4,5)) * 16) + eval(('' + tas[itas].outerHTML).split('olor:#')[1].substring(5,6)));<br>    document.getElementById('htmltp').value+=tdelim + xred + '~~' + xgreen + '~~' + xblue;<br>    tdelim='``';<br>    } <br>    document.getElementById('htmltp').value+=tdelim + eval(eval(tas[itas].style.left.replace('px','')) / 2) + '`~' + eval(eval(tas[itas].style.top.replace('px','')) / 2) + '`~' + ihis;<br>    tdelim='``';<br> }<br>    if (document.getElementById('htmltp').value != "") tdelim='``';<br>   }<br> }<br>   if (lhplace != '') {<br>    location.href=lhplace; <br>    return '';<br>   }<br>  // if (document.getElementById('htmltp').value != "") alert(document.getElementById('htmltp').value);<br> if (pcent.indexOf('.0000000%') != -1) return '';<br> pcent=pcent.replace('.00000000','').replace('.0000000','').replace('.000000','').replace('.00000','').replace('.0000','').replace('.000','').replace('.00','').replace('.0','');<br> <br> var dbo=document.body.outerHTML;<br> var dhi=document.head.innerHTML;<br> if (pcent.trim() != '8' + '5%') {<br>   dbo=dbo.replace('1' + '5%;','0%;display:none;');  <br>   while (dbo.indexOf('8' + '5%') != -1) {<br>     dbo=dbo.replace('8' + '5%',pcent.trim());<br>   }<br>   while (dhi.indexOf('8' + '5%') != -1) {<br>     dhi=dhi.replace('8' + '5%',pcent.trim());<br>   }<br> }<br> var hcont='&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;' + dhi + '&lt;/head&gt;' + dbo.replace(/clicksup\(/g,'dumc' + 'lickm' + 'ysup(').replace(/\&lt;textarea /g,'&lt;textarea onchange=upd(this,this.value); onfocus=ofc(this); ') + '&lt;/html&gt;';<br> var pt='motherboard', edits='';<br> var nexti=1, esty;<br> while (document.getElementById(pt)) {<br>   if (nexti &gt;= 2) {<br>     esty=document.body.outerHTML.split(' .mboard' + nexti + ' { ');<br>     if (esty.length &gt; 1) {<br>      if (document.body.outerHTML.indexOf('" id="motherboard') != -1) {<br>      hcont=hcont.replace('" id="motherboard' + nexti + '"', '' + esty[1].split(';')[0] + ';" id="motherboard' + nexti + '"');<br>      } else {<br>      hcont=hcont.replace("' id='motherboard" + nexti + "'", "" + esty[1].split(";")[0] + ";' id='motherboard" + nexti + "'");<br>      }<br>     }<br>   }<br>   edits+=',[' + nexti + ']' + document.getElementById(pt).value;<br>   hcont=hcont.replace('&gt;' + '&lt;/textarea&gt;', '&gt;' + document.getElementById(pt).value.replace(/\&lt\;/g,"&lt;").replace(/\&gt\;/g,"&gt;") + ' ' + '&lt;/TEX' + 'TAREA&gt;');<br>     //alert(edits + ' ..' + nexti + '. ' + hcont.substring(hcont.indexOf('&lt;bo' + 'dy ')));<br>   nexti++;<br>   pt='motherboard' + nexti;<br> }<br> if (pcent.trim() != '8' + '5%') {<br>     hcont=hcont.replace('8' + '5%',pcent.trim());<br>     while (hcont.indexOf('1px so' + 'lid') != -1) {<br>       hcont=hcont.replace('1px so' + 'lid','0px so' + 'lid')<br>     }<br> }<br> if (hcont.indexOf('&lt;/TEXT' + 'AREA&gt;') != -1) {<br>     while (hcont.indexOf('&lt;/TEXT' + 'AREA&gt;') != -1) {<br>       hcont=hcont.replace('&lt;/TEXT' + 'AREA&gt;','&lt;/text' + 'area&gt;')<br>     }<br>     //alert(edits + ' ... ' + hcont.substring(hcont.indexOf('&lt;bo' + 'dy ')));<br> }<br> //if (cmode) alert(hcont);<br> if (dopdf || (pcent.trim() == '8' + '5%' && pcent != '8' + '5%')) {<br> var eto="";<br> if (dodownload) eto=" ";<br> if (doemail || (pcent.trim() == '8' + '5%' && pcent != '8' + '5%')) eto=prompt('Please enter email address to email Textarea Pointing webpage to (and consider adding a comma separated mention of your own email address for Reply To All purposes)',etosofar);<br> if (eto != null) {<br> if (eto.indexOf('@') != -1 || dopdf) {<br> etosofar=eto;<br> if (dopdf && !dodownload && !doemail) {<br>   if (1 == 1) {<br>   document.getElementById('femail').target='_blank';<br>   setTimeout(andlater,2000);<br>   } else {<br>   document.getElementById('iemail').style.display='block';<br>   location.href='#iemail';<br>   }<br> }<br> document.getElementById('emailto').value=eto;<br> if (document.getElementById('htmltp').value == '') document.getElementById('htmltp').value=hcont.replace(/\+\=/g,'#@~#').replace(/\+\+/g,'#@!#').replace(/ \+ /g,'#@#');<br> document.getElementById('semail').click();<br> }<br> }<br> } else {<br> if (newo != '') {<br>    if (localStorage) {<br>     if (localStorage.getItem('tp_' + newo)) {<br>       //document.title+=' remove ';<br>       localStorage.removeItem('tp_' + newo);<br>     }<br>       //document.title+=' set ';<br>     //alert(value);<br>     var bbit='m' + hcont.split('&lt;f' + 'orm')[1].split('&gt;')[0] + '&gt;';<br>     //alert(newo + '=' + encodeURIComponent(hcont.split('&lt;bo' + 'd')[1].replace(bbit,'').split('&lt;/b' + 'ody&gt;')[0]));<br>     localStorage.setItem('tp_' + newo, encodeURIComponent(hcont.split('&lt;fo' + 'r')[1].replace(bbit,'').split('&lt;/f' + 'orm&gt;')[0])); //.replace(/\&lt;/g,'&lt;').replace(/\&gt;/g,'&gt;'));<br>     document.getElementById('ssaveas').innerHTML+='&lt;option value="' + newo + '"&gt;Recall "' + newo + '"&lt;/option&gt;';<br>    }<br> } else {<br> var wo=window.open('','_blank'); <br> wo.document.write(hcont); <br> }<br> }<br> for (itas=0;itas&lt;tao.length;itas++) {<br> //if (tao[itas].id == focusto) alert(tao[itas].innerHTML + ' ... ' + tao[itas].value);<br>     tao[itas].innerHTML=taoih[itas].replace(/\&lt\;/g,"&lt;").replace(/\&gt\;/g,"&gt;");<br>     tao[itas].value=taoih[itas].replace(/\&lt\;/g,"&lt;").replace(/\&gt\;/g,"&gt;");<br> }<br>}<br><br>function andlater() {<br>  document.getElementById('femail').target='iemail';<br>}<br><br><br>function andlateragain() {<br>     var pn=(location.search.split('fontmode=')[1] ? location.search.split('fontmode=')[1].split('&')[0] : '');<br>     if (pn != '' || 1 == 1) {<br>       if (pn != '') {<br>         pntwo=(location.search.split('fontname=')[1] ? location.search.split('fontname=')[1].split('&')[0] : '');<br>         if (pntwo != '') {<br>         namefont=decodeURIComponent(pntwo);<br>       if (namefont.trim() != namefont) {<br>          docurl+='&blankify=y';<br>          namefont=namefont.trim();<br>       }<br>       if (namefont.replace(/\+/g,'') != namefont) {<br>          namefont=namefont.replace(/\+/g,'');<br>          document.getElementById('fontf').value=namefont;<br>          lastfontf=namefont;<br>       }<br>         }<br>       }<br>       if (document.getElementById('topsel')) {<br>         document.getElementById('dtopsel').innerHTML="&lt;select onchange=\" if (this.value == '') { learnfont=false; } else { learnfont=settolearn(this.value.replace('both','')); if (!learnfont) { this.value=''; } } \" title='Textarea Pointing or Font Learning (via Canvas or Textarea or both)' id=topsel&gt;&lt;option value=&gt;Pointing&lt;/option&gt;&lt;option value=canvas&gt;Font Learning via Canvas&lt;/option&gt;&lt;option value=textarea&gt;Font Learning via Textarea&lt;/option&gt;&lt;option value=both&gt;Font Learning via Both&lt;/option&gt;&lt;/select&gt;".replace("value=" + pn + "&gt;","value='" + pn + "' selected&gt;");<br>       }<br>       if (document.getElementById('dlearn')) {<br>         document.getElementById('dlearn').innerHTML="&lt;a title='Learn a Font for future use?' id='alearn' onclick=\"learnfont=settolearn('');\" style='cursor:pointer;text-decoration:none;'&gt;Font&lt;/a&gt;";<br>       }<br>       if (pn != '') settolearn(pn);<br>     }<br>}<br><br>function checkf(iois) {<br>  if (learnfontmode == learnfontmode.toUpperCase()) {<br>  if (iois != null) {<br>    var aconto = (iois.contentWindow || iois.contentDocument);<br>    if (aconto != null) {<br>   try {<br>     if (1 == 2) document.title+=' try ' + learnfontmode;<br>     if (aconto.document) { aconto = aconto.document; learnfontmode=learnfontmode.toLowerCase();  // aconto = aconto.document; }<br>     learnfontmode=learnfontmode.toLowerCase();<br>     //alert(aconto.body.outerHTML);<br>     if (aconto.body.outerHTML.indexOf('&lt;body&gt;') == -1) {<br>     setTimeout(andlateragain,2000);<br>     }<br>     }<br>   } catch(eee) { }<br>   if (1 == 2) document.title+=' herE1 ' + learnfontmode;<br>   } else {<br>   if (1 == 2) document.title+=' here2 ' + learnfontmode;<br>  }<br>  } else {<br>   if (1 == 2) document.title+=' here3 ' + learnfontmode;<br>  }<br>  }<br>  learnfontmode=learnfontmode.toLowerCase();<br>}<br>function checkp(iois) {<br>  if (iois != null) {<br>    var aconto = (iois.contentWindow || iois.contentDocument);<br>    if (aconto != null) {<br>   try {<br>     if (aconto.document) { aconto = aconto.document; }<br>     document.getElementById('myform').action='../PHP/pixellate.php';<br>     document.getElementById('myform').method='POST';<br>     document.getElementById('myform').target='ipixel';<br>     document.getElementById('d' + iois.id.substring(1)).style.display='block';<br>     iois.src='';<br>   } catch(eee) { }<br>   }<br>  }<br>}<br><br>function checki(iois) {<br>  if (iois != null) {<br>    var aconto = (iois.contentWindow || iois.contentDocument);<br>    if (aconto != null) {<br>   try {<br>     if (aconto.document) { aconto = aconto.document; }<br>     document.getElementById('d' + iois.id.substring(1)).style.display='block';<br>   } catch(eee) { }<br>   }<br>  }<br>}<br><br>function ofc(ois) {<br> focusto=ois.id;<br>}<br><br>function newone(tv) {<br>   htmlout('85.00000%' + tv);<br>}<br><br>function pickold(tv) {<br>   htmlout('85.000000%' + tv);<br>}<br><br>function rotate(userinstigated) {  <br>  var img=document.getElementById("ncanvas"),imgi=document.getElementById("icanvas");<br>  var wasw=celem.width, wash=celem.height;<br>  celem.width=wasw;<br>  celem.height=wash;<br>  //alert('canvas clear');<br>  ccontext.translate(wasw/2, wash/2);<br>  var rad = 2 * Math.PI - eval(document.getElementById("nrotate").value) * Math.PI / 180;<br>  ccontext.rotate(-rad);<br>  ccontext.scale(1, 1);<br>  ccontext.drawImage(imgi, -wasw/2, -wash/2, wasw, wash);<br>  var huhi=celem.toDataURL('image/png');<br>  img.src=huhi;<br>  img.style.display='inline-block';<br>  document.getElementById("nrotate").style.display='inline-block';<br>  document.getElementById("ndrotate").style.display='inline-block';<br>  celem.width=wasw;<br>  celem.height=wash;<br>  ccontext.drawImage(imgi,0,0);<br>  if (userinstigated != 0) document.getElementById("ncanvas").click();<br>}<br><br>function flop() {  <br>  var img=document.getElementById("mcanvas"),imgi=document.getElementById("icanvas");<br>  var wasw=celem.width, wash=celem.height;<br>  celem.width=wasw;<br>  celem.height=wash;<br>  ccontext.translate(wasw/2, wash/2);<br>  ccontext.scale(1, -1);<br>  ccontext.drawImage(imgi, -wasw/2, -wash/2, wasw, wash);<br>  var huhi=celem.toDataURL('image/png');<br>  img.src=huhi;<br>  img.style.display='inline-block';<br>  celem.width=wasw;<br>  celem.height=wash;<br>  ccontext.drawImage(imgi,0,0);<br>}<br><br>function flip() {  <br>  var img=document.getElementById("lcanvas"),imgi=document.getElementById("icanvas");<br>  var wasw=celem.width, wash=celem.height;<br>  celem.width=wasw;<br>  celem.height=wash;<br>  ccontext.translate(wasw/2, wash/2);<br>  ccontext.scale(-1, 1);<br>  ccontext.drawImage(imgi, -wasw/2, -wash/2, wasw, wash);<br>  var huhi=celem.toDataURL('image/png');<br>  img.src=huhi;<br>  img.style.display='inline-block';<br>  celem.width=wasw;<br>  celem.height=wash;<br>  ccontext.drawImage(imgi,0,0);<br>}<br><br>function grayscale() {  // thanks to https://www.w3schools.com/tags/canvas_getimagedata.asp<br>var n=0,img=document.getElementById("kcanvas"),imgi=document.getElementById("icanvas");<br>//ccontext.drawImage(img,0,0);<br>var imgData=ccontext.getImageData(0,0,celem.width,celem.height);<br>var i;<br>           var data = imgData.data;<br>           for (i = 0; i &lt; data.length; i += 4) {<br>              var bright = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];<br>              data[i] = bright;<br>              data[i + 1] = bright;<br>              data[i + 2] = bright;<br>           }<br>ccontext.putImageData(imgData,0,0);<br>var huhi=celem.toDataURL('image/png');<br>img.src=huhi;<br>img.style.display='inline-block';<br>// invert colors<br>//for (i=0;i&lt;data.length;i+=4) {<br>//  data[i]=eval(255 - data[i]);<br>//  data[i+1]=eval(255 - data[i+1]);<br>//  data[i+2]=eval(255 - data[i+2]);<br>//  data[i+3]=eval(0); // - data[i+3]);<br>//}<br>//ccontext.putImageData(imgData,0,0);<br>ccontext.drawImage(imgi,0,0);<br>}<br><br>function pib() {<br>   learnfont=true;<br>}<br><br>function retsigsig(incca) {<br>  var retval='y', sofar='', wasv='', wasvp='';<br>  <br>  if (learnfont && docurl.indexOf('blankify=') == -1) {<br>           if (localStorage) {<br>             if (localStorage.getItem('fd_' + namefont)) {<br>               if (local_font != '') {<br>                 local_font=decodeURIComponent(localStorage.getItem('fd_' + namefont));<br>                 //alert('36:' + local_font);<br>               }<br>               sofar=decodeURIComponent(localStorage.getItem('fd_' + namefont));<br>               if (sofar.indexOf('.000000000' + ('000' + ('' + incca)).slice(-3)) != -1) {<br>              if ((sofar + ';').indexOf('.000000000' + ('000' + ('' + incca)).slice(-3) + ',') == -1) {<br>               wasv='.000000000' + ('000' + ('' + incca)).slice(-3);<br>               wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];<br>               //alert(document.getElementById("raster").value + ' .+. ;' + wasvp + wasv);<br>              } else {<br>               wasv='000000000' + ('000' + ('' + incca)).slice(-3) + (sofar + '.000000000').split('000000000' + ('000' + ('' + incca)).slice(-3))[1].split('.000000000')[0] + '.000000000';<br>               //alert(wasv + ' +++ ' + sofar);<br>               if (wasv.indexOf(';') != -1 && (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].indexOf(',') == -1) {<br>               //alert('initial ' + wasv + ' ++ ' + sofar);<br>               //alert('first ' + wasv + ' ++get rid of ' + ';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.' + ' ...' + sofar);<br>                 wasv="." + ((wasv + '~').replace(';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.','').replace('.000000000','').replace('000000000~','').replace('~',''));<br>               //alert(wasv + ' ++get rid of ' + ';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.' + ' ...' + sofar);<br>               } else {<br>                 wasv="." + wasv.replace('.000000000','');<br>               //alert(wasv + ' +!+ ' + sofar);<br>               }<br>               wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];<br>               //alert(wasvp + wasv + ' +=+ ' + sofar);<br>              }               }<br>             }<br>             if ((wasvp + wasv) == '') wasv='0';<br>             if ((wasvp + wasv).indexOf(',') == -1) wasv+=',0';<br>             //document.title=("-" + (wasvp + wasv).replace('.000000000' + ('000' + ('' + incca)).slice(-3),'').replace(/\;/g,',-') + ' should not contain ' + '.000000000' + ('000' + ('' + incca)).slice(-3));<br>  //return 'y';<br>             if (("-" + (wasvp + wasv).replace('.000000000' + ('000' + ('' + incca)).slice(-3),'').replace(/\;/g,',-')) != "-0,0") {<br>               return "-" + (wasvp + wasv).replace('.000000000' + ('000' + ('' + incca)).slice(-3),'').replace(/\;/g,',-');<br>             }<br>           }<br>  }  <br>  <br>  return retval;<br>}<br><br>function prerasterize() {  // thanks to https://www.w3schools.com/tags/canvas_getimagedata.asp<br>           var oursuffix='',notf=true, i, ii, jj, jcol=0, jrow=0, found=false, onerow=eval(4 * celem.width,celem.height), sofar='', wasv='', wasvp='';<br>           var rasterc='', rasters=[];<br>           var lastones=[0,0,0,0], interested=false, thisone=false, withlastone=false, cdelim='';<br>           var offsetstotry=[eval(-4 - onerow),-onerow,eval(4 - onerow),-4,4,eval(onerow - 4),celem.width,eval(onerow + 4)];<br>           if (1 == 2) {<br>           var imgi=document.getElementById("icanvas");<br>  var wasw=celem.width, wash=celem.height; <br>  celem.width=wasw;<br>  celem.height=wash;<br>           ccontext.drawImage(imgi,0,0);<br>           }   <br>           var imgData=null;<br>           if (learnfont) {<br>           if (localStorage) {<br>             if (localStorage.getItem('fd_' + namefont)) {<br>               sofar=decodeURIComponent(localStorage.getItem('fd_' + namefont));<br>               if (local_font != '') {<br>                 local_font=sofar;<br>                 //alert('38:' + local_font);<br>               }<br>               if (docurl.indexOf('blankify=') != -1 && !done) sofar='';<br>               //alert('?' + sofar);<br>               done=true;<br>             }<br>             if (sofar == '') {<br>               sofar=namefont + ':0.000000000127';<br>               for (i = 0; i &lt;= 32; i++) {<br>                sofar+=';' + '0.000000000' + ('000' + ('' + i)).slice(-3);<br>               }<br>             }<br>             if (sofar.indexOf('.000000000' + ('000' + ('' + cca)).slice(-3)) != -1) {<br>              if ((sofar + ';').indexOf('.000000000' + ('000' + ('' + cca)).slice(-3) + ',') == -1) {<br>               wasv='.000000000' + ('000' + ('' + cca)).slice(-3);<br>               wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];<br>               //alert(document.getElementById("raster").value + ' .+. ;' + wasvp + wasv);<br>			  } else if (7 == 77) {<br>               wasv='000000000' + ('000' + ('' + cca)).slice(-3) + (sofar + '.000000000').split('000000000' + ('000' + ('' + cca)).slice(-3))[1].split('.000000000')[0] + '.000000000';<br>               //alert(wasv + ' 0+++ ' + sofar);<br>               if (wasv.indexOf(';') != -1 && (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].indexOf(',') == -1) {<br>                 wasv="." + ((wasv + '~').replace(';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.','').replace('~','')).replace('.000000000','');<br>               //alert(wasv + ' 0++ ' + sofar);<br>               } else {<br>                 wasv="." + wasv.replace('.000000000','');<br>               //alert(wasv + ' 0+!+ ' + sofar);<br>               }<br>               wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];<br>               //alert(wasvp + wasv + ' 0+=+ ' + sofar);<br>              } else {<br>               wasv='000000000' + ('000' + ('' + cca)).slice(-3) + (sofar + '.000000000').split('000000000' + ('000' + ('' + cca)).slice(-3))[1].split('.000000000')[0] + '.000000000';<br>               //alert(wasv + ' +++ ' + sofar);<br>               if (wasv.indexOf(';') != -1 && (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].indexOf(',') == -1) {<br>                 wasv="." + ((wasv + '~').replace(';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.','').replace('.000000000','').replace('000000000~','').replace('~',''));<br>               //alert(wasv + ' ++ ' + sofar);<br>               } else {<br>                 wasv="." + wasv.replace('.000000000','');<br>               //alert(wasv + ' +!+ ' + sofar);<br>               }<br>               wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];<br>               //alert(wasvp + wasv + ' +=+ ' + sofar);<br>              }<br>               //alert(document.getElementById("raster").value + ' ... ;' + wasvp + wasv);<br>              if (shouldmaintain) {<br>                if ((wasvp + wasv).indexOf('.000000000' + ('000' + ('' + cca)).slice(-3)) != -1) {<br>                  oursuffix=(wasvp + wasv).split('.000000000' + ('000' + ('' + cca)).slice(-3))[1];<br>                }<br>                shouldmaintain=false;<br>              }<br>              sofar=sofar.replace(';' + wasvp + wasv, '');<br>             }<br>             localStorage.removeItem('fd_' + namefont); <br>           }<br>           rasters=document.getElementById("raster").value.split(",");<br>           if (document.getElementById('rerasterize')) {<br>           if (document.getElementById('rerasterize').value != "") {<br>           //alert(document.getElementById("rerasterize").value);<br>           rasters=document.getElementById('rerasterize').value.split(",");<br>           } //else {<br>           //alert(document.getElementById("raster").value);<br>           //}<br>           }<br>           if (rasters.length == 0 || document.getElementById("raster").value == "") {<br>           sofar+=';0.000000000' + ('000' + ('' + cca)).slice(-3) + oursuffix;<br>           //alert(cca + ' ' + document.getElementById("raster").value + ' why? ' + sofar);<br>           } else {<br>           sofar+=(';' + Math.floor(Math.abs((eval(rasters[0])))) + '.000000000' + ('000' + ('' + cca)).slice(-3)).replace('NaN','0') + oursuffix;<br>           for (i = 1; i &lt; rasters.length; i++) {<br>             if (eval(rasters[i]) &lt; 0) {<br>              if ((i % 2) == 1) {<br>              sofar+=(';' + rasters[i]);<br>              } else {<br>              sofar+=(';' + Math.floor(Math.abs((eval(rasters[i]))))).replace('NaN','0');<br>              }<br>             } else {<br>              if ((i % 2) == 1) {<br>              sofar+=(',' + rasters[i]);<br>              } else {<br>              sofar+=(',' + Math.floor(Math.abs((eval(rasters[i]))))).replace('NaN','0');<br>              }<br>             }<br>           }<br>           //alert(sofar);<br>           }<br>           if (localStorage) {<br>             //alert(';' + wasvp + wasv + ' ... ' + sofar);<br>               if (local_font != '') {<br>                 local_font=sofar;<br>                 //alert('39:' + local_font);<br>               }<br>             localStorage.setItem('fd_' + namefont, encodeURIComponent(sofar));<br>             return sofar;<br>           }<br>           } else {<br>           imgData=ccontext.getImageData(0,0,celem.width,celem.height);<br>           }<br>           var data = imgData.data;<br>           <br>           document.getElementById("width").value='' + celem.width;<br>           document.getElementById("height").value='' + celem.height;<br>           <br>           for (i = 0; i &lt; data.length; i += 4) {<br>              jcol=eval(i % onerow);<br>              if (jcol == 0 && i != 0) {<br>                jrow++; // row count<br>              }<br>              //if (i == 0) {<br>              //  alert('' + data[i] + ',' + data[i + 1] + ',' + data[i + 2] + ',' + data[i + 3]);<br>              //}<br>              thisone=(data[i] != 0 || data[i + 1] != 0 || data[i + 2] != 0 || data[i + 3] != 0);<br>              if (!found && thisone) {<br>                found=true;<br>                lastones[0] = data[i];<br>                lastones[1] = data[i + 1];<br>                lastones[2] = data[i + 2];<br>                lastones[3] = data[i + 3];<br>                cdelim=data.length + '.' + onerow + ':';<br>              }<br>              if (thisone) {<br>                withlastone=(data[i] != lastones[0] || data[i + 1] != lastones[1] || data[i + 2] != lastones[2] || data[i + 3] != lastones[3]);<br>                if (withlastone) {   // new thread<br>                  lastones[0] = data[i];<br>                  lastones[1] = data[i + 1];<br>                  lastones[2] = data[i + 2];<br>                  lastones[3] = data[i + 3];<br>                  rasterc+=cdelim + '' + eval(i / 4) + '.' + ('000' + ('' + data[i])).slice(-3) + ('000' + ('' + data[i + 1])).slice(-3) + ('000' + ('' + data[i + 2])).slice(-3) + ('000' + ('' + data[i + 3])).slice(-3);<br>				  data[i] = 0;<br>				  data[i + 1] = 0;<br>				  data[i + 2] = 0;<br>				  data[i + 3] = 0;<br>				  jj=i;<br>                  cdelim=';';<br>                  notf=false;<br>                  while (!notf) { <br>                   notf=true;<br>                   for (ii=0; ii&lt;offsetstotry.length; ii++) {<br>                    if ((jj + offsetstotry[ii]) &gt;= 0 && (jj + 4 + offsetstotry[ii]) &lt; data.length) {<br>                    if (notf && data[jj + offsetstotry[ii]] == lastones[0] && data[jj + 1 + offsetstotry[ii]] == lastones[1] && data[jj + 2 + offsetstotry[ii]] == lastones[2] && data[jj + 3 + offsetstotry[ii]] == lastones[3]) {<br>                      notf=false;<br>                      jj+=offsetstotry[ii];<br>                      rasterc+=',' + eval(jj / 4);<br>                      //document.title=rasterc;<br>				      data[jj] = 0;<br>				      data[jj + 1] = 0;<br>				      data[jj + 2] = 0;<br>				      data[jj + 3] = 0;<br>                    }<br>                    }<br>                   }<br>                  }<br>                }<br>              }<br>           }<br>           if (learnfont) {<br>           return rasterc;<br>           }<br>           //alert('rasterc=' + rasterc);<br>           document.getElementById("raster").value=rasterc;<br>           //rasterize();<br>           return '';<br>}           <br>           <br>function rasterize() {  // thanks to https://www.w3schools.com/tags/canvas_getimagedata.asp<br>           document.getElementById("dpixel").style.display='block';<br>           document.getElementById("inraster").style.display='block';<br>}<br><br><br><br><br>function inverse() {  // thanks to https://www.w3schools.com/tags/canvas_getimagedata.asp<br>prerasterize();<br>var n=0,img=document.getElementById("jcanvas"),imgi=document.getElementById("icanvas");<br>//ccontext.drawImage(img,0,0);<br>var imgData=ccontext.getImageData(0,0,celem.width,celem.height);<br>var i;<br>var data = imgData.data;<br>// invert colors<br>for (i=0;i&lt;data.length;i+=4) {<br>  data[i]=eval(255 - data[i]);<br>  data[i+1]=eval(255 - data[i+1]);<br>  data[i+2]=eval(255 - data[i+2]);<br>  //data[i+3]=eval(15); //255); // - data[i+3]);<br>}<br>ccontext.putImageData(imgData,0,0);<br>var huhi=celem.toDataURL('image/png');<br>img.src=huhi;<br>img.style.display='inline-block';<br>// invert colors<br>//for (i=0;i&lt;data.length;i+=4) {<br>//  data[i]=eval(255 - data[i]);<br>//  data[i+1]=eval(255 - data[i+1]);<br>//  data[i+2]=eval(255 - data[i+2]);<br>//  data[i+3]=eval(0); // - data[i+3]);<br>//}<br>//ccontext.putImageData(imgData,0,0);<br>ccontext.drawImage(imgi,0,0);<br>grayscale();<br>flip();<br>flop();<br>rotate(0);<br>setTimeout(rasterize,200);<br>}<br><br><br>function settolearn(nonforcedisblank) {<br>  if (nonforcedisblank == '') {<br>  namefont=prompt("Given it could slow down proceedings (and for now just allowing canvas mode), do you still want to monitor characters that go to make up your font name destination?  If not, make the font name blank, or you can change that name here, and by adding (unused) spaces to that name you are telling me to clear any existing data for that font, and by adding (unused) plus sign to that name you are telling me to place that local font name into the Font Family field.", namefont);<br>  learnfontmode='both';<br>  if (namefont != null) {<br>     if (namefont == "") {<br>       namefont=(lastfontf + '_' + lastfonts + '_' + lastfontw).replace(/\ /g,'_');<br>       learnfont=false;<br>     } else {<br>       if (namefont.trim() != namefont) {<br>          docurl+='&blankify=y';<br>          namefont=namefont.trim();<br>       }<br>       if (namefont.replace(/\+/g,'') != namefont) {<br>          namefont=namefont.replace(/\+/g,'');<br>          document.getElementById('fontf').value=namefont;<br>          lastfontf=namefont;<br>       }<br>       learnfont=true;<br>       showiframes("0");<br>     }<br>  } else {<br>     namefont=(lastfontf + '_' + lastfonts + '_' + lastfontw).replace(/\ /g,'_');<br>     learnfont=false;<br>  }<br>  } else if (nonforcedisblank == 'canvas') {<br>  if (pntwo != '') {<br>  namefont=pntwo;<br>  pntwo='';<br>  } else {<br>  namefont=prompt("Given it could slow down proceedings, do you still want to monitor characters that go to make up your font name destination?  If not, make the font name blank, or you can change that name here, and by adding (unused) plus sign to that name you are telling me to place that local font name into the Font Family field.", namefont);<br>  }<br>  learnfontmode='canvas';<br>  if (namefont != null) {<br>     if (namefont == "") {<br>       namefont=(lastfontf + '_' + lastfonts + '_' + lastfontw).replace(/\ /g,'_');<br>       learnfont=false;<br>     } else {<br>       if (namefont.trim() != namefont) {<br>          docurl+='&blankify=y';<br>          namefont=namefont.trim();<br>       }<br>       if (namefont.replace(/\+/g,'') != namefont) {<br>          namefont=namefont.replace(/\+/g,'');<br>          document.getElementById('fontf').value=namefont;<br>          lastfontf=namefont;<br>       }<br>       learnfont=true;<br>       showiframes("0");<br>     }<br>  } else {<br>     namefont=(lastfontf + '_' + lastfonts + '_' + lastfontw).replace(/\ /g,'_');<br>     learnfont=false;<br>  }<br>  } else {<br>  if (pntwo != '') {<br>  namefont=pntwo;<br>  pntwo='';<br>  } else {<br>  namefont=prompt("Given it could slow down proceedings (and at the moment just allowing canvas mode), do you still want to monitor characters that go to make up your font name destination?  If not, make the font name blank, or you can change that name here, and by adding (unused) spaces to that name you are telling me to clear any existing data for that font, and by adding (unused) plus sign to that name you are telling me to place that local font name into the Font Family field.", namefont);<br>  }<br>  learnfontmode='textarea';<br>  if (namefont != null) {<br>     if (namefont == "") {<br>       namefont=(lastfontf + '_' + lastfonts + '_' + lastfontw).replace(/\ /g,'_');<br>       learnfont=false;<br>     } else {<br>       if (namefont.trim() != namefont) {<br>          docurl+='&blankify=y';<br>          namefont=namefont.trim();<br>       }<br>       if (namefont.replace(/\+/g,'') != namefont) {<br>          namefont=namefont.replace(/\+/g,'');<br>          document.getElementById('fontf').value=namefont;<br>          lastfontf=namefont;<br>       }<br>       learnfont=true;<br>       showiframes("0");<br>     }<br>  } else {<br>     namefont=(lastfontf + '_' + lastfonts + '_' + lastfontw).replace(/\ /g,'_');<br>     learnfont=false;<br>  }<br>  }<br>  return learnfont;<br>}<br>function processii() {<br>  processi('#');<br>}<br><br>function processi(alet) {<br> //alert('Rasterization of ' + alet + ' resulted in ' + document.getElementById('raster').value);<br> cca=eval('' + alet.charCodeAt());<br> prerasterize();<br> if (1 == 2) document.getElementById('raster').value='';<br> if (alet == '9') {<br>  showiframes("A");<br> } else if (alet == 'Z') {<br>  showiframes("a");<br> } else if (alet == 'z') {<br>   alet=' ';<br>   showiframes(String.fromCharCode(alet.charCodeAt() + 1));<br> } else if (String.fromCharCode(alet.charCodeAt() + 1) == '0') {<br>   showiframes("{");<br> } else if (alet == '{') {<br>   showiframes("|");<br> //} else if (alet == '"') {<br> //  showiframes('"');<br> } else if (alet == '|') {<br>   showiframes("~");<br> } else if (alet == '~') {<br>   alet='9';<br>   showiframes(String.fromCharCode(alet.charCodeAt() + 1));<br> } else if (alet == '@') {<br>   showiframes("@");<br>   alert('Thanks for that. We have stored that font character set ready for later use.');<br> } else {<br>   if (String.fromCharCode(alet.charCodeAt() + 1) == '"') {<br>   showiframes('"');<br>   } else if (String.fromCharCode(alet.charCodeAt() + 1) == '#') {<br>   showiframes('#');<br>   } else {<br>   showiframes(String.fromCharCode(alet.charCodeAt() + 1));<br>   }<br> }<br>}<br><br>function showiframes(aalet) {<br>  var tabs="", extra_as='&lt;input type=hidden id=rerasterize value=&gt;&lt;/input&gt;&lt;input type=hidden id=refontnearest value=""&gt;&lt;/input&gt;';<br>  var rss=retsigsig('' + aalet.charCodeAt());<br>  <br> if (aalet == '0' && sels == '') {<br>      var qqlet=aalet, thanks=false;<br>      //sels='&lt;br&gt;&lt;select style="float:right;" onchange="showiframes(String.fromCharCode(this.value));"&gt;&lt;option value="48"&gt;0&lt;/option&gt;&lt;/select&gt;&lt;br&gt;';<br>      sels='&lt;select style="float:right;" onchange="showiframes(String.fromCharCode(this.value));"&gt;&lt;option value="48"&gt;0&lt;/option&gt;&lt;/select&gt;';<br>      while (!thanks) {<br> if (qqlet == '9') {  <br>  qqlet="A";<br>  sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br> } else if (qqlet == 'Z') {<br>  qqlet="a";<br>  sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br> } else if (qqlet == 'z') {<br>   qqlet=' ';<br>   qqlet=String.fromCharCode(qqlet.charCodeAt() + 1);<br>   sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br> } else if (String.fromCharCode(qqlet.charCodeAt() + 1) == '0') {<br>  qqlet="{";<br>  sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br> } else if (qqlet == '{') {<br>  qqlet="|";<br>  sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br> } else if (qqlet == '|') {<br>  qqlet="~";<br>  sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br> } else if (qqlet == '~') {<br>   qqlet='9';<br>   qqlet=String.fromCharCode(qqlet.charCodeAt() + 1);<br>   sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br> } else if (qqlet == '@') {<br>  qqlet="~";<br>  sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br>  thanks=true; // alert('Thanks for that. We have stored that font character set ready for later use.');<br> } else {<br>   if (String.fromCharCode(qqlet.charCodeAt() + 1) == '"') {<br>  qqlet='"';<br>  sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br>   } else if (String.fromCharCode(qqlet.charCodeAt() + 1) == "'") {<br>  qqlet="'";<br>  sels=sels.replace('&lt;/select&gt;','&lt;option value="' + qqlet.charCodeAt() + '"&gt;' + qqlet + '&lt;/option&gt;&lt;/select&gt;');<br>   } else if (String.fromCharCode(qqlet.charCodeAt() + 1) == '#') {<br>  qqlet="#";<br>  sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br>   } else {<br>   qqlet=String.fromCharCode(qqlet.charCodeAt() + 1);<br>   sels=sels.replace("&lt;/select&gt;","&lt;option value='" + qqlet.charCodeAt() + "'&gt;" + qqlet + "&lt;/option&gt;&lt;/select&gt;");<br>   }<br> } <br>}<br> }<br>  <br>  <br>  if (rss.replace('-0,0','').indexOf(',') != -1) {<br>    extra_as+='&lt;a style="float:right;cursor:pointer;text-decoration:underline;" onclick=" shouldmaintain=false; document.getElementById(' + "'" + 'top_iframe' + "'" + ').src=' + "'" + './signature_signature.html?nocookies=y&letter=' + encodeURIComponent(aalet) + "';" + '"&gt;Clear&lt;/a&gt;&lt;br&gt;';<br>    extra_as+='&lt;a style="float:right;cursor:pointer;text-decoration:underline;" onclick=" shouldmaintain=true; this.style.textDecoration=' + "'" + 'none' + "'" + '; "&gt;Retain&lt;/a&gt;&lt;br&gt;';<br>    extra_as+='&lt;input style="float:right;width:60px;" title="This colour can superceed the last [black is #000000] colour via clicks you make at the top left font character editor window" type=color id=refontc value="' + document.getElementById('fontc').value + '"&gt;&lt;/input&gt;';<br>  } else {<br>    extra_as+='&lt;input type=hidden id=refontc value="' + document.getElementById('fontc').value + '"&gt;&lt;/input&gt;';<br>  }<br>  if (aalet == "'") {  <br>  extra_as+=sels.replace("&gt;'&lt;", " selected&gt;'&lt;");<br>  } else {<br>  extra_as+=sels.replace('&gt;' + aalet + '&lt;', ' selected&gt;' + aalet + '&lt;');<br>  }<br>  if (aalet == '"') {<br>  tabs="&lt;hr&gt;&lt;table id=ftable border=5&gt;&lt;tbody id=ftbody&gt;&lt;tr id=ftr&gt;&lt;td id=ftd style='background-color:lightgreen;'&gt;&lt;!--canvas id=top_canvas width=100 height=100 style='position:absolute;top:0px;left:0px;width:50px;height:50px;display:none;z-index:-8;'&gt;&lt;/canvas--&gt;&lt;iframe style='width:50px;height:50px;display:block;z-index:55;' id='top_iframe' src='./signature_signature.html?nocookies=" + encodeURIComponent(rss) + "&letter=" + encodeURIComponent(aalet) + "'&gt;&lt;/iframe&gt;" + extra_as + "&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td id=theletter style='background-color:lightblue;border:2px solid green;'&gt;" + namefont + "&lt;br&gt;&nbsp;&nbsp;&nbsp;&lt;input type=button onclick=processi('" + '"' + "'); title='Click me when my character has been digitised above' style='border:3px solid pink;z-index:55;cursor:pointer;text-decoration:none;height:30px;' id='aletter' value=" + '&quot;' + "&gt;&lt;/input&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;hr&gt;";<br>  } else if (aalet == '#') {<br>  tabs="&lt;hr&gt;&lt;table id=ftable border=5&gt;&lt;tbody id=ftbody&gt;&lt;tr id=ftr&gt;&lt;td id=ftd style='background-color:lightgreen;'&gt;&lt;!--canvas id=top_canvas width=100 height=100 style='position:absolute;top:0px;left:0px;width:50px;height:50px;display:none;z-index:-8;'&gt;&lt;/canvas--&gt;&lt;iframe title='Local font character editor window' style='width:50px;height:50px;display:block;z-index:55;' id='top_iframe' src='./signature_signature.html?nocookies=" + encodeURIComponent(rss) + "&letter=" + encodeURIComponent(aalet) + "'&gt;&lt;/iframe&gt;" + extra_as + "&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td id=theletter style='background-color:lightblue;border:2px solid green;'&gt;" + namefont + "&lt;br&gt;&nbsp;&nbsp;&nbsp;&lt;input type=button onclick=processii(); title='Click me when my character has been digitised above' style='border:3px solid pink;z-index:55;cursor:pointer;text-decoration:none;height:30px;' id='aletter' value=" + '#' + "&gt;&lt;/input&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;hr&gt;";<br>  } else if (aalet == "'") {<br>  tabs="&lt;hr&gt;&lt;table id=ftable border=5&gt;&lt;tbody id=ftbody&gt;&lt;tr id=ftr&gt;&lt;td id=ftd style='background-color:lightgreen;'&gt;&lt;!--canvas id=top_canvas width=100 height=100 style='position:absolute;top:0px;left:0px;width:50px;height:50px;display:none;z-index:-8;'&gt;&lt;/canvas--&gt;&lt;iframe title='Local font character editor window' style='width:50px;height:50px;display:block;z-index:55;' id='top_iframe' src=\"./signature_signature.html?nocookies=" + encodeURIComponent(rss) + "&letter=" + encodeURIComponent(aalet) + "\"&gt;&lt;/iframe&gt;" + extra_as + "&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td id=theletter style='background-color:lightblue;border:2px solid green;'&gt;" + namefont + "&lt;br&gt;&nbsp;&nbsp;&nbsp;&lt;input type=button onclick=processi(\"" + "'" + "\"); title='Click me when my character has been digitised above' style='border:3px solid pink;z-index:55;cursor:pointer;text-decoration:none;height:30px;' id='aletter' value=\"'\"&gt;&lt;/input&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;hr&gt;";<br>  //alert(tabs);<br>  } else {<br>  tabs="&lt;hr&gt;&lt;table id=ftable border=5&gt;&lt;tbody id=ftbody&gt;&lt;tr id=ftr&gt;&lt;td id=ftd style='background-color:lightgreen;'&gt;&lt;!--canvas id=top_canvas width=100 height=100 style='position:absolute;top:0px;left:0px;width:50px;height:50px;display:none;z-index:-8;'&gt;&lt;/canvas--&gt;&lt;iframe title='Local font character editor window' style='width:50px;height:50px;display:block;z-index:55;' id='top_iframe' src='./signature_signature.html?nocookies=" + encodeURIComponent(rss) + "&letter=" + encodeURIComponent(aalet) + "'&gt;&lt;/iframe&gt;" + extra_as + "&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td id=theletter style='background-color:lightblue;border:2px solid green;'&gt;" + namefont + "&lt;br&gt;&nbsp;&nbsp;&nbsp;&lt;input type=button onclick=\"processi('" + aalet + "');\" title='Click me when my character has been digitised above' style='border:3px solid pink;z-index:55;cursor:pointer;text-decoration:none;height:30px;' id='aletter' value=" + aalet + "&gt;&lt;/input&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;hr&gt;";<br>  }<br>  //alert(tabs);<br>  document.getElementById('fonti').innerHTML=tabs;<br>}<br>&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body id=ibody style='width:100%;' onload='dofocus();'&gt;<br>&lt;form onsubmit='return lotsforthefuture(this);' id='myform' action='./textarea_pointing.html' method='GET'&gt;<br>&lt;textarea onclick='clicksup(event);' title='Base Textarea to type away on or click/touch to reposition text;font-family:Arial;font-size:12px;color:#000000;font-style:normal;' style='font-family:Arial;font-size:12px;font-style:normal;color:#000000;border:0px solid yellow;border-right:1px solid red;z-index:1;position:absolute;background-color:transparent;top:0px;left:0px;height:100vh;' id='motherboard' name='motherboard' cols=300 rows=300&gt;&lt;/textarea&gt;<br>&lt;input type='submit' id='mysubmit' value='Draw This' style='display:none;'&gt;&lt;/input&gt;<br>&lt;input name=raster id=raster type=hidden value=''&gt;&lt;/input&gt;&lt;input name=positive id=positive type=hidden value='y'&gt;&lt;/input&gt;&lt;input name=width id=width type=hidden value=''&gt;&lt;/input&gt;&lt;input name=height id=height type=hidden value=''&gt;&lt;/input&gt;&lt;input name=size id=size type=hidden value='1'&gt;&lt;/input&gt;<br>&lt;div id='d2'&gt;&lt;/div&gt;<br>&lt;/form&gt;<br>&lt;div id='menu' style='margin-left:5px;background-color:yellow;position:absolute;left:85%;width:15%;top:0px;height:100vh;'&gt;&lt;h1&gt;&nbsp;&nbsp;Textarea &lt;br&gt;&nbsp;&nbsp;&lt;div id=dtopsel style=display:inline;&gt;&lt;select onchange=" if (this.value == '') { learnfont=false; } else { learnfont=settolearn(this.value.replace('both','')); if (!learnfont) { this.value=''; } } " title='Textarea Pointing or Font Learning (via Canvas or Textarea or both)' id=topsel&gt;&lt;option value=''&gt;Pointing&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/h1&gt;&lt;h3&gt;&nbsp;&nbsp;RJM Programming&lt;/h3&gt;&lt;h3&gt;&nbsp;&nbsp;December, 2017&lt;/h3&gt;<br>&lt;div id=fonti&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=dlearn style=display:inline;&gt;Font&lt;/div&gt; Family: &nbsp;&nbsp;&nbsp;&nbsp;&lt;input title='FPDF likes one of Arial,Courier,Helvetica,Symbol,Times,ZapfDingbats' style='margin-left:20px;' onblur="document.getElementById(focusto).style.fontFamily=altit(this.value,this.id);" type='text' id='fontf' value='Arial'&gt;&lt;/input&gt;&lt;br&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;Font Size: &nbsp;&nbsp;&nbsp;&nbsp;&lt;input style='margin-left:20px;' onblur="document.getElementById(focusto).style.fontSize=altit(this.value,this.id);" type='text' id='fonts' value='12px'&gt;&lt;/input&gt;&lt;br&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;Font Colour: &nbsp;&nbsp;&nbsp;&nbsp;&lt;input style='margin-left:20px;' onchange="document.getElementById(focusto).style.color=altit(this.value,this.id);" onblur="document.getElementById(focusto).style.color=altit(this.value,this.id);" type='color' id='fontc' value='#000000'&gt;&lt;/input&gt;&lt;br&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;Font Style: &nbsp;&nbsp;&nbsp;&nbsp;&lt;input title='FPDF likes one of normal,bold,italic,underline' style='margin-left:20px;' onblur="document.getElementById(focusto).style.fontStyle=altit(this.value,this.id);" type='text' id='fontw' value='normal'&gt;&lt;/input&gt;&lt;br&gt;&lt;br&gt; <br>&lt;hr&gt;&lt;span id=dsaveas&gt;&lt;select onchange=pickold(this.value); id=ssaveas&gt;&lt;option value=''&gt;Fill in Save As or choose&lt;/option&gt;&lt;/select&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input onblur=newone(this.value); title='Save As...' type=text value=''&gt;&lt;/input&gt;&lt;/span&gt;<br>&lt;hr&gt;&nbsp;Window: &nbsp;&lt;input type='button' style='display:inline-block;' onclick="htmlout('100%');" value="New"&gt;&lt;/input&gt;&nbsp;&lt;input type='button' style='display:inline-block;' onclick="htmlout('85%');" value="Menu"&gt;&lt;/input&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;Canvas: &nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=bcanvas type='button' style='margin-left:20px;' onclick=" if (document.getElementById('ipixel')) { document.getElementById('ipixel').style.top='-1200px';   document.getElementById('ipixel').style.zIndex='-5';  document.getElementById('ipixel').style.display='none'; }   if (this.value == 'Canvas') {  if (learnfont) { setTimeout(pib,4000); learnfont=false; }  htmlout('85.0000%');  this.value='Textareas'; } else { pbtas();   } " value="Canvas"&gt;&lt;/input&gt;&lt;div id=ddcanvas&gt;&lt;/div&gt;&lt;br&gt;<br>&lt;div id='demail' style='display:none;'&gt;&nbsp;&nbsp;Email: &nbsp;&lt;input type='button' style='margin-left:20px;' onclick="htmlout(' 85%');" value="Email &#128231;"&gt;&lt;/input&gt;&nbsp;&lt;input type='button' onclick="htmlout('100.0%');" value="PDF"&gt;&lt;/input&gt;&lt;br&gt;&nbsp;&nbsp;&nbsp;&nbsp;Download: &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type='button' onclick="htmlout('100.00%');" value="PDF"&gt;&lt;/input&gt;&lt;br&gt;&nbsp;&nbsp;&nbsp;&nbsp;Viewer: &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type='button' style='margin-left:20px;' onclick="htmlout('100.000%');" value="PDF"&gt;&lt;/input&gt;&lt;br&gt;&lt;form target='iemail' action='../PHP/Geographicals/prediff.php' method='POST' style='display:none;' id='femail' name='femail'&gt;&lt;input type=hidden name=htmltp id=htmltp value=''&gt;&lt;/input&gt;&lt;input type=hidden name=emailto id=emailto value=''&gt;&lt;/input&gt;&lt;input type=submit id=semail value='Email' style='display:none;'&gt;&lt;/input&gt;&lt;/form&gt;&lt;/div&gt;<br>&lt;hr&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a target=_blank title='Emoji Use advice' href='https://www.google.com.au/search?q=emoji+keyboard+shortcuts&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&dcr=0&ei=x7JKWsrFGcHN8gfBy5rABw'&gt;Emoji &#128231; Use?&lt;/a&gt;&lt;br&gt;<br>&lt;input style='margin-left:-6000px' type='text' id='offtheradar' value=''&gt;&lt;/input&gt; <br>&lt;/div&gt;&lt;div id=dcanvas style='z-index:-9;display:none;'&gt;&lt;/div&gt;<br>&lt;iframe style='width:800px;height:800px;display:none;' name='iemail' id='iemail' onload='checki(this);' src='../PHP/Geographicals/prediff.php'&gt;&lt;/iframe&gt;<br>&lt;iframe style='position:absolute;top:-1200px;left:0px;width:800px;height:800px;display:none;z-index:-5;' name='ipixel' id='ipixel' onload='checkp(this);' src='../PHP/pixellate.php?positive=y&zeroes=-1&size=0' onclick=" this.style.top='-1200px'; this.style.display='none';   this.style.zIndex='-5';  this.style.display='none'; location.href='#ibody';"&gt;&lt;/iframe&gt;<br>&lt;iframe style='position:absolute;top:-2200px;left:0px;width:800px;height:800px;display:none;z-index:-5;' name='ifontletter' id='ifontletter' onload='checkf(this);' src='./signature_signature.html?nocookies=y' onclick=" this.style.top='-2200px'; this.style.display='none';   this.style.zIndex='-5';  this.style.display='none'; location.href='#ibody';"&gt;&lt;/iframe&gt;<br>&lt;div id='dscript'&gt;&lt;/div&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;<br><br>