7d6
<  #hxtml,#bxody { overflow: hidden; }
335d333
< if (dhuh == null) { dhuh=document.body; }
815c813
<      c = document.getElementById('canvaselement'); //querySelector('canvas'), // see Example 4
---
>      c = document.querySelector('canvas'), // see Example 4
955d952
<   //if (img[eval(-1 + img.length)]) { alert(dhuh.id + ' ... ' + eval(-1 + img.length)); }
989c986
<       //document.title+='' + swir + 'bad' + lasttop + ':' + itop + ' ';
---
>       document.title+='' + swir + 'bad' + lasttop + ':' + itop + ' ';
993c990
<       //document.title+='' + swir + 'good' + lasttop + ':' + tops[lasttop] + ' ';
---
>       document.title+='' + swir + 'good' + lasttop + ':' + tops[lasttop] + ' ';
1020,1021c1017,1018
<       //elem.width = imgl.width;
<       //elem.height = imgl.height;
---
>       //c.width = img.width;
>       //c.height = img.height;
1023,1027d1019
<       c = document.getElementById('canvaselement'); //querySelector('canvas'), // see Example 4
<       ctx = c.getContext('2d');
<       if (isNaN(xtop)) {
<       ctx.drawImage(imgl, 0, 0);
<       } else {
1029d1020
<       }
1200a1192
>       //alert(dw);
1203c1195
<       var preqmxyf="<div id=divform><form id='" + af + "' action='#' style='opacity:0.8; z-index:5; position:absolute; top: 225px; left: " + eval(dw * 2 / 3) + "px; border: 3px solid red; background-color: pink;'><h2>&nbsp;" + document.getElementById('myh1').innerHTML.replace('Capture Email', 'Canvas Annotation').replace('Game', 'Report').replace('gsc', 'qgsc').replace(/nofloat/g, 'float').split(' and')[0] + " Canvas Annotation" + "</h2>" + omyfih + "</form></div>";
---
>       var preqmyf="<form id='" + af + "' action='#' style='opacity:0.8; z-index:5; position:absolute; top: 185px; left: " + eval(dw - 300) + "px; border: 3px solid red; background-color: pink;'><h2>&nbsp;" + document.getElementById('myh1').innerHTML.replace('Capture Email', 'Canvas Annotation').replace('Game', 'Report').replace('gsc', 'qgsc').replace(/nofloat/g, 'float') + "</h2>" + omyfih + "</form>";
1206c1198
<       document.getElementById('danno').innerHTML=preqmxyf; //document.getElementById('qm x yf').outerHTML;
---
>       document.getElementById('danno').innerHTML=preqmyf; //document.getElementById('qmyf').outerHTML;
1706,1709d1697
<        //document.getElementById('qm' + 'yf').style.position='sticky';
<        document.getElementById('qm' + 'yf').style.top=eval(-200 + eval('' + elem.offsetTop) / 2 + eval('' + getBodyScrollTop())) + 'px'; //document.body.style.scrollTop;
<        //document.title='' + eval(-200 + eval('' + elem.offsetTop) + eval('' + getBodyScrollTop())); //document.body.style.scrollTop;
<        //alert('' + eval(eval('' + elem.offsetTop) + eval('' + getBodyScrollTop())) + ' ' + elem.offsetTop + ' ... ' + getBodyScrollTop() + ' ... ' + document.getElementById('divform').innerHTML);
1749c1737
<     if (1 == 2 && (x != lastx || y != lasty)) {
---
>     if (x != lastx || y != lasty) {
1759,1792c1747
< function getBodyScrollTop() { 
<   const el = document.scrollingElement || document.documentElement;
<   return el.scrollTop;
< }
< 
< function copycanvas() {
< var wimg = document.createElement('img');
< wimg.src = elem.toDataURL()
< 
< var wdiv = document.createElement('div');
< wdiv.contentEditable = true;
< wdiv.appendChild(wimg);
< document.body.appendChild(wdiv);
< 
< // do copy
< SelectText(wdiv);
< document.execCommand('Copy');
< document.body.removeChild(wdiv);
< }
< 
< function SelectText(element) { // thanks to https://stackoverflow.com/a/40547470/1118626
<     var doc = document;
<     if (doc.body.createTextRange) {
<         var range = document.body.createTextRange();
<         range.moveToElementText(element);
<         range.select();
<     } else if (window.getSelection) {
<         var selection = window.getSelection();
<         var range = document.createRange();
<         range.selectNodeContents(element);
<         selection.removeAllRanges();
<         selection.addRange(range);
<     }
< }
---
> 
1829c1784
<   document.write('<br>Canvas image(s) via [canvasContext].drawImage() is Clickable (for scribble and non-scribble annotation functionalities) below ...<br><canvas id="canvaselement" style="-webkit-overflow-scrolling:touch;" onclick="canc(event);" ontouchstart="canc(event);" data-onclick=" onbb(event,' + "'" + 'onclick' + "'" + ', this); " data-onmousedown=" onbb(event,' + "'" + 'onmousedown' + "'" + ', this); "  data-ontouchdown=" onbb(event,' + "'" + 'ontouchdown' + "'" + ', this); " ></canvas>');
---
>   document.write('<br>Canvas image(s) via [canvasContext].drawImage() is Clickable (for scribble and non-scribble annotation functionalities) below ...<br><canvas id="canvaselement" onclick="canc(event);" data-onclick=" onbb(event,' + "'" + 'onclick' + "'" + ', this); " data-onmousedown=" onbb(event,' + "'" + 'onmousedown' + "'" + ', this); "  data-ontouchdown=" onbb(event,' + "'" + 'ontouchdown' + "'" + ', this); " ></canvas>');
1831c1786
<   document.write('<details><summary>Canvas image(s) via [canvasContext].drawImage() is Clickable (for scribble and non-scribble annotation functionalities) below ...</summary><canvas id="canvaselement" style="-webkit-overflow-scrolling:touch;" onclick="canc(event);" ontouchstart="canc(event);" data-onclick=" onbb(event,' + "'" + 'onclick' + "'" + ', this); " data-onmousedown=" onbb(event,' + "'" + 'onmousedown' + "'" + ', this); "  data-ontouchdown=" onbb(event,' + "'" + 'ontouchdown' + "'" + ', this); " ></canvas></details>');
---
>   document.write('<details><summary>Canvas image(s) via [canvasContext].drawImage() is Clickable (for scribble and non-scribble annotation functionalities) below ...</summary><canvas id="canvaselement" onclick="canc(event);" data-onclick=" onbb(event,' + "'" + 'onclick' + "'" + ', this); " data-onmousedown=" onbb(event,' + "'" + 'onmousedown' + "'" + ', this); "  data-ontouchdown=" onbb(event,' + "'" + 'ontouchdown' + "'" + ', this); " ></canvas></details>');
1873,1881c1828,1829
<     &nbsp;<img src='//www.rjmprogramming.com.au/MarkItUp/image.png' onclick=" if (1 == 2) { document.getElementById('file').click();  document.getElementById('file').style.display='block'; } document.getElementById('dpf').style.display='block'; " alt='Image' title='Image'></img>
<     &nbsp;<img src='//www.rjmprogramming.com.au/MarkItUp/copy.png' onclick=" copycanvas(); " alt='Canvas Copy' title='Canvas Copy'></img><input style='display:none;' id='file' type='file' name='file'></input><div id=dpf style='display:BLOCK;'>&nbsp;&nbsp;<span class='readBytesButtons'><button style='display:none;' data-endbyte='4' data-startbyte='0'>1-5</button><button style='display:none;' data-endbyte='14' data-startbyte='5'>6-15</button><button style='display:none;' data-endbyte='7' data-startbyte='6'>7-8</button>
<     <br>... vs Image URL: <input id='vsiurl' type='url' value='+' onblur='readUBlob(this.value,0,0);' style='width:40%;'></input>
<     <br>... Offset X: <input style='width:10%;' id='xoff' type='number' value='0'></input> Offset Y: <input style='width:10%;' id='yoff' type='number' value='0'></input>
<     <br><button onclick='readBlob(0,0);'>Place into Canvas</button><button onclick='readOBlob(0,0);'>Overlay into Canvas</button></div><div id='byte_range' style='display:none;'></div><div id='byte_content' style='display:none;'></div><input id='fil' value='' type='hidden'></input><img id='spareimg' src='' style='display:none;'></img>
<     <br>Annotation (optional): <input onblur='placeannotation(this);' id='iannotation' type='text' value=''></input>
<     <br><span>Anno B&amp;W (optional): <input onblur='placeannotation(this);' id='jannotation' type='text' value=''></input>
<     <br>Style: <input type='text' id='myfont' value='18px Verdana'></input>
<     <br>Colour: <input type='color' id='mycolour' value='#000000'></input>&nbsp;Rotation (deg): <input style='width:10%;' type='number' step=1 min='-360' max='360' id='rotation' value='0'></input><input type='hidden' id='rof' value=''></input></span><br>
---
>     &nbsp;<img src='//www.rjmprogramming.com.au/MarkItUp/image.png' onclick=" if (1 == 2) { document.getElementById('file').click();  document.getElementById('file').style.display='block'; } document.getElementById('dpf').style.display='block'; " alt='Image' title='Image'></img><input style='display:none;' id='file' type='file' name='file'></input><div id=dpf style='display:BLOCK;'>&nbsp;&nbsp;<span class='readBytesButtons'><button style='display:none;' data-endbyte='4' data-startbyte='0'>1-5</button><button style='display:none;' data-endbyte='14' data-startbyte='5'>6-15</button><button style='display:none;' data-endbyte='7' data-startbyte='6'>7-8</button><br>... vs Image URL: <input id='vsiurl' type='url' value='+' onblur='readUBlob(this.value,0,0);' style='width:60%;'></input><br>... Offset X: <input style='width:25%;' id='xoff' type='number' value='0'></input> Offset Y: <input style='width:25%;' id='yoff' type='number' value='0'></input><br><button onclick='readBlob(0,0);'>Place into Canvas</button><button onclick='readOBlob(0,0);'>Overlay into Canvas</button></div><div id='byte_range' style='display:none;'></div><div id='byte_content' style='display:none;'></div><input id='fil' value='' type='hidden'></input><img id='spareimg' src='' style='display:none;'></img>
>     <br>Annotation (optional): <input onblur='placeannotation(this);' id='iannotation' type='text' value=''></input>&nbsp;&nbsp;<span>Anno B&amp;W (optional): <input onblur='placeannotation(this);' id='jannotation' type='text' value=''></input><br>Style: <input type='text' id='myfont' value='18px Verdana'></input>&nbsp;Colour: <input type='color' id='mycolour' value='#000000'></input>&nbsp;Rotation (deg): <input type='number' step=1 min='-360' max='360' id='rotation' value='0'></input><input type='hidden' id='rof' value=''></input></span><br>
1963,1965d1910
<        //document.getElementById('qm' + 'yf').style.position='sticky'; //'absolute';
<        //document.getElementById('qm' + 'yf').style.top=getBodyScrollTop(); //document.body.style.scrollTop;
<        //document.title='' + getBodyScrollTop(); //document.body.style.scrollTop;
1968d1912
<        //if (allowc || 1 == 1) {
1970c1914
<        //document.title='top click';
---
>        document.title='top click';
1982c1926
<        //document.title='nontop click';
---
>        document.title='nontop click';
2008c1952
<     if (1 == 2 && (x != lastx || y != lasty)) {
---
>     if (x != lastx || y != lasty) {
2019,2021c1963
<     drawt(); 
<     allowc = false; 
<     document.getElementById('topic').focus(); 
---
>     drawt(); allowc = false; document.getElementById('topic').focus();