<html>
<head>
<meta charset="UTF-8">
<title>Canvas HTML Feedback Tutorial ... RJM Programming ... April 2016 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes" />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>

<script type='text/javascript' src='world.js' defer></script>
<script language="JavaScript">

var x=0, y=0, lastx=0, lasty=0;
var clickno = 0;
var first=true;
var xxoff=-680;
var yyoff=-74;

var urlis='';
var titleos='';

var xlworld = 'feedback';
var xuworld = 'Feedback';
var xuubits=document.URL.split('.htm');
var xuuubits=xuubits[0].split('/');
xlworld=xuuubits[eval(-1 + xuuubits.length)];
xuworld=xlworld.substring(0,1).toUpperCase() + xlworld.substring(1);

var isxcontact=parent.document.URL.indexOf('Contact');
if (isxcontact == -1) isxcontact=document.URL.indexOf('contact=contact');

var pseudo_sentence = "";

var score = 0.0;
var goes = 0.0;

var cf = "18px Verdana";

function xcapture(toh, tos, toe) {
//if (navigator.userAgent.match(/Android/i)) alert('isxcontact=' + isxcontact);
//if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(700000);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && isxcontact == -1) {
if (document.getElementById('myiemail').value.indexOf('@') == -1) {
var femail = prompt('Please supply the Email To address', '');
if (femail == null) femail = '';
if (femail.indexOf('@') != -1) {
fixmyemail(femail, 0);
}
}
} else {
//if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(70000);
//if (isxcontact != -1 && !document.getElementById('myiemail')) alert(7);
if (document.getElementById('myiemail')) {
if (document.getElementById('myiemail').value.indexOf('@') != -1) {
// if (isxcontact != -1) alert(70);
document.getElementById('mode').value = '';
document.getElementById('ismobile').value = 'y';
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
document.getElementById('myform').action = document.getElementById('myform').action.replace('mode=1', 'mode=');
//document.getElementById('myemail').href = '#' + document.getElementById('myemail').href;
// if (isxcontact != -1) alert(700);
}
}
}
//if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(7000);
if (isxcontact == -1) {
var pretoh = elem.toDataURL("image/png",0);
//toh.value = pretoh.substr(22, pretoh.length);
var xbits=pretoh.split(',');
//toh.value = pretoh.substr(eval(pretoh.indexOf(',') + 1), pretoh.length);
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(xbits[0]);
toh.value = pretoh.replace(xbits[0] + ',', '');
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(70000);
if (1 == 1) {
tos.click();
} else {
document.getElementById('myform').submit();
}
}
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(700000);
var things = document.URL.split("?");
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert("document.getElementById('myfname').value=" + document.getElementById('myfname').value);
if (isxcontact != -1) {
if (toe.href.indexOf('body=') == -1) toe.href+='&body=';
toe.href = toe.href.split('ody=')[0].replace('fill.in.email@address',document.getElementById('myto').value).replace('tJUNK=', 't=' + encodeURIComponent(document.getElementById('mysubject').value) + '%20to%20').replace('&b','&cc=' + encodeURIComponent(document.getElementById('mycc').value) + '&bcc=' + encodeURIComponent(document.getElementById('mybcc').value) + '&b') + 'ody=' + encodeURIComponent(document.getElementById('myfeedback').value); // + (things[0] + "/~").replace("world.html/~", document.getElementById('myfname').value).replace(xxlworld + ".html/~", document.getElementById('myfname').value).replace("index.html/~", document.getElementById('myfname').value).replace("//~", "/" + document.getElementById('myfname').value).replace("/~", "/" + document.getElementById('myfname').value);
} else {
toe.href = toe.href + (things[0] + "/~").replace("world.html/~", document.getElementById('myfname').value).replace(xxlworld + ".html/~", document.getElementById('myfname').value).replace("index.html/~", document.getElementById('myfname').value).replace("//~", "/" + document.getElementById('myfname').value).replace("/~", "/" + document.getElementById('myfname').value);
}
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(toe.href);
if (isxcontact != -1) {
if (navigator.userAgent.match(/Android/i)) {
//toe.click();
aemail(toe);
} else {
toe.click();
}
} else {
if (document.getElementById('to').value.indexOf('@') != -1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
toe=toe;
} else {
toe.click();
}
}
}

function ChangeTutNow(selo) {
urlis=selo.value;
var fthiso=null;
var huhss=urlis.split('title='), thiso;
titleis='';
if (huhss.length > 1) {
titleis=huhss[1].replace(/_/g, " ");
elem.width = elem.width;
pseudo_sentence = 'Regarding ' + titleis + ' at ' + String.fromCharCode(10) + urlis;
cf = "16px Verdana";
if (isxcontact != -1) cf = "10px Verdana";
placetext();
cf = "18px Verdana";
if (isxcontact != -1) cf = "12px Verdana";
pseudo_sentence = 'Regarding ' + titleis;
thiso=document.getElementById('feedback');
fthiso=document.getElementById('myfeedback');
if (isxcontact != -1 && fthiso != null) {
if (fthiso.value != "") {
fthiso.value=pseudo_sentence + "\n" + fthiso.value;
thiso.value="Feedback " + pseudo_sentence;
} else {
fthiso.value=pseudo_sentence;
thiso.value="Feedback " + pseudo_sentence;
}
if (document.getElementById('myto').value != "") {
document.getElementById('mysubject').value="Feedback " + pseudo_sentence;
document.getElementById('myisubject').value="Feedback " + pseudo_sentence;
fixmyemail(document.getElementById('myto').value + ' ',0);
fixmyemail("Feedback " + pseudo_sentence + ' ',1);
}
} else {
if (thiso.value == 'Feedback') {
document.getElementById('feedback').value+=' ' + pseudo_sentence;
document.getElementById('mysubject').value=thiso.value;
document.getElementById('myisubject').value=thiso.value;
fixmyemail(thiso.value + ' ',1);
} else if (thiso.value.indexOf('Feedback ') != -1 && pseudo_sentence.indexOf(' Tutorial') != -1) {
document.getElementById('feedback').value='Feedback ' + pseudo_sentence;
document.getElementById('mysubject').value=thiso.value;
document.getElementById('myisubject').value=thiso.value;
fixmyemail(thiso.value + ' ',1);
} else if ((thiso.value + '~').indexOf(' Tutorial~') != -1 && pseudo_sentence.indexOf(' Tutorial') != -1) {
document.getElementById('feedback').value=document.getElementById('feedback').value.replace(' Tutorial','') + ' ' + pseudo_sentence.substring(pseudo_sentence.indexOf(' Tutorial'));
document.getElementById('mysubject').value=thiso.value;
document.getElementById('myisubject').value=thiso.value;
fixmyemail(thiso.value + ' ',1);
}
}
}
}

function checklast(iois) {
var swih='';
var copts='', huhs;
var sw=null, presw=iois; //top.document.getElementById('ipostings');
if (presw != null) {
var aconto = (presw.contentWindow || presw.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
sw=aconto.body; //.getElementById('tuts');
if (swih == '') {
swih=sw.innerHTML;
var isa=swih.replace('</select','<select').replace('</select','<select').replace('</select','<select').replace('</select','<select').replace('</select','<select').split('<select');
for (var iu=1; iu<isa.length; iu++) {
if (isa[iu].indexOf('tuts') != -1 && document.getElementById('ideas').innerHTML == '') {
//alert('<select' + isa[iu] + '</select>');
document.getElementById('ideas').innerHTML='Ideas: <br><select' + isa[iu] + '</select>';
}
}
}
}
}
}
}


function andlaterdo() {

document.getElementById('divannotation').innerHTML=document.getElementById('divannotation').innerHTML.replace("</form>","<input type=hidden name=from id=from value=''></input></form>").replace("</form>","<input type=hidden name=cc id=cc value=''></input></form>").replace("</form>","<input type=hidden name=bcc id=bcc value=''></input></form>");

document.getElementById('divannotation').style.top='485px';
document.getElementById('divannotation').style.left=10;
document.getElementById('divannotation').style.width='95%';
document.getElementById('divannotation').style.border='7px solid yellow';

document.getElementById('divannotation').style.display='block';
document.getElementById('mysubject').value = 'Feedback';
document.getElementById('myisubject').value = 'Feedback';
fixmyemail('Feedback ',1);
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
document.getElementById('from').value=document.getElementById('myfrom').value;


var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
var hh = today.getHours();
var minm = today.getMinutes(); //January is 0!
var ss = today.getSeconds();
if (document.getElementById('myfname')) document.getElementById('myfname').value = xlworld + "_" + yyyy + "_" + mm + "_" + hh + "_" + minm + "_" + ss + ".png";


if (document.getElementById('myform')) document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && isxcontact == -1) {
if (document.getElementById('mode')) {
document.getElementById('mode').value = '';
document.getElementById('ismobile').value = 'y';
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
document.getElementById('myform').action = document.getElementById('myform').action.replace('mode=1', 'mode=');
//document.getElementById('myemail').href = '#' + document.getElementById('myemail').href;
}
}


}

function onloading() {
setTimeout(andlaterdo,3000);
elem.click();
}

function andthen() {
elem.click();
}

function placetext() {
context.font = cf;
var huhs=pseudo_sentence.split(String.fromCharCode(10)), thisy=eval(yyoff + (Math.min(y,lasty) + Math.max(y,lasty)) / 2);
for (var ii=0; ii<huhs.length; ii++) {
//alert(thisy + " via " + yyoff + " " + (Math.min(y,lasty) + Math.max(y,lasty)) / 2);
if (ii == 1 && huhs[ii].indexOf("http") == 0) {
cf = "12px Verdana";
if (isxcontact != -1) cf = "8px Verdana";
}
context.font = cf;
context.strokeText(huhs[ii].replace("ø", "ΓΈ"),eval(xxoff + 2 + Math.min(x,lastx)),thisy);
thisy+=20;
}
//gpy = gpy + 50;
}

function fixto(tvs) {
if (tvs != '') { document.getElementById('myiemail').value=tvs; document.getElementById('to').value=tvs; fixmyemail(tvs,0); document.getElementById('mode').value = ''; document.getElementById('ismobile').value = 'y'; }
}

</script>


</head>
<body align="center" onload="onloading();">
<script type='text/javascript'>
var jscontact=parent.document.URL.indexOf('Contact');
if (jscontact == -1) jscontact=document.URL.indexOf('contact=contact');
if (jscontact == -1) {
document.write('<h1 align="center">Feedback</h1>');
document.write('<h2 align="center" id="score" style="display:none;">Score is <span id=sone>0</span> from <span id=stwo>0</span> goes</h2>');
document.write("<div align='center'><table cellpadding=5 cellspacing=5><tr><td style='border:4px solid pink;width:33%;'>");
document.write("To: <input style='width:200px; align:right;' type='email' id='myto' onblur=\" fixto(this.value); \" value=''></input><br>");
document.write("From: <input style='width:200px; align:right;' type='email' id='myfrom' onblur=\" document.getElementById('from').value=this.value; \" value='rmetcalfe@rjmprogramming.com.au'></input><br>");
document.write("CC: <input style='width:200px; align:right;' type='email' id='mycc' onblur=\" document.getElementById('cc').value=this.value; \" value=''></input><br>");
document.write("BCC: <input style='width:200px; align:right;' type='email' id='mybcc' onblur=\" document.getElementById('bcc').value=this.value; \" value=''></input><br>");
document.write("Subject: <input style='width:200px; align:right;' type='text' id='feedback' onblur=\" document.getElementById('mysubject').value=this.value; document.getElementById('myisubject').value=this.value; fixmyemail(this.value + ' ',1); \" value='Feedback'></input><br><input type='button' id='feedbutton' onclick=\" capture(document.getElementById('mydurl'),document.getElementById('bsubmit'),document.getElementById('myemail')); \" value='Send Feedback' style='background-color:yellow; align:center;'></input>");
document.write("</td><td style='border:4px solid blue;width:33%;'>");
} else if (navigator.userAgent.match(/Android/i) && isxcontact != -1) {
document.write("<div align='center' style='width:100%;'><table cellpadding=5 cellspacing=5 style='width:100%;'><tr><td style='border:4px solid pink;width:210px;'>");
document.write("To: <input style='width:160px; align:right;' type='text' id='myto' onblur=\" fixto(this.value); \" value='rmetcalfe@rjmprogramming.com.au'></input><br>");
document.write("<input style='width:160px; align:right;' type='hidden' id='myfrom' onblur=\" document.getElementById('from').value=this.value; \" value='rmetcalfe@rjmprogramming.com.au'></input>");
document.write("From: <input style='width:160px; align:right;' type='text' id='mycc' onblur=\" document.getElementById('cc').value=this.value; \" value=''></input><br>");
document.write("BCC: <input style='width:160px; align:right;' type='text' id='mybcc' onblur=\" document.getElementById('bcc').value=this.value; \" value=''></input><br>");
document.write("Subject: <input style='width:160px; align:right;' type='text' id='feedback' onblur=\" document.getElementById('mysubject').value=this.value; document.getElementById('myisubject').value=this.value; fixmyemail(this.value + ' ',1); \" value='Feedback'></input><br><input type='button' id='feedbutton' onclick=\" xcapture(null,null,document.getElementById('myemail')); \" value='Send Feedback' style='background-color:yellow; '></input>");
document.write("</td><td style='border:4px solid blue;width:210px;float:left;'>");
} else {
document.write("<div align='center' style='width:100%;'><table cellpadding=5 cellspacing=5 style='width:100%;'><tr><td style='border:4px solid pink;width:210px;'>");
document.write("To: <input style='width:160px; align:right;' type='email' id='myto' onblur=\" fixto(this.value); \" value='rmetcalfe@rjmprogramming.com.au'></input><br>");
document.write("<input style='width:160px; align:right;' type='hidden' id='myfrom' onblur=\" document.getElementById('from').value=this.value; \" value='rmetcalfe@rjmprogramming.com.au'></input>");
document.write("From: <input style='width:160px; align:right;' type='email' id='mycc' onblur=\" document.getElementById('cc').value=this.value; \" value=''></input><br>");
document.write("BCC: <input style='width:160px; align:right;' type='email' id='mybcc' onblur=\" document.getElementById('bcc').value=this.value; \" value=''></input><br>");
document.write("Subject: <input style='width:160px; align:right;' type='text' id='feedback' onblur=\" document.getElementById('mysubject').value=this.value; document.getElementById('myisubject').value=this.value; fixmyemail(this.value + ' ',1); \" value='Feedback'></input><br><input type='button' id='feedbutton' onclick=\" capture(document.getElementById('mydurl'),document.getElementById('bsubmit'),document.getElementById('myemail')); \" value='Send Feedback' style='background-color:yellow; '></input>");
document.write("</td><td style='border:4px solid blue;width:210px;float:left;'>");
}
</script>
Feedback (words<br> to augment Annotations, the position<br> of which you can double click below):<br><textarea style='color=lightgray;width:200px;' rows=6 cols=40 id='myfeedback' title='Feedback' value='' onchange=" pseudo_sentence=this.value; placetext(); " onblur=" pseudo_sentence=this.value; placetext(); "></textarea>
</td><td id='ideas' style='border:4px solid green; width:210px; align: top;'></td></tr></table></div>
<script type='text/javascript'>
var jjscontact=parent.document.URL.indexOf('Contact');
if (jjscontact == -1) jjscontact=document.URL.indexOf('contact=contact');
if (jjscontact == -1) {
document.write('<canvas style="border: 5px solid green; background-color: black; opacity: 0.3;" title="Feedback" id="canvaselement" width="1350" height="200" ></canvas>');
} else {
document.write('<canvas style="border: 5px solid green; background-color: black; opacity: 0.3;" title="Feedback" id="canvaselement" width="620" height="100" ></canvas>');
}
</script>
<script language="JavaScript">

var toggle = 0;

var elem = document.getElementById('canvaselement');
var elemLeft = eval(elem.offsetLeft + 680*0);
var elemTop = eval(elem.offsetTop + 124*0);
var context = elem.getContext('2d');
var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];


// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
if (first) elem.width = elem.width;
first=false;
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;
if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
if (event.pageX || event.pageY) {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
} else {
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
}
lastx=x;
lasty=y;
//xxoff=0;
//yyoff=0;
} else {
lastx=x;
lasty=y;
if (event.pageX || event.pageY) {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
} else {
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
}
xxoff=0;
yyoff=0;
}


clickno = clickno + 1;


var r = Math.floor((Math.random()*256)+0);
var g = Math.floor((Math.random()*256)+0);
var b = Math.floor((Math.random()*256)+0);
var thiscol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];

elem.style.backgroundColor = thiscol;

}, false);




</script>
<img src='' title='' alt=''></img>
<table><tr><td>Your email looks as above</td></tr></table>
<iframe id='ipostings' style='display:none;' src='//www.rjmprogramming.com.au/Welcome.html' onload='checklast(this);'></iframe>
</body>
</html>