<html>
<head>
<meta charset="UTF-8">
<title>Canvas HTML Element 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>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script src='translate_hear.js?translate_hear=yes' type='text/javascript'></script>
<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 nextexpected = "you'llneverfindthis";
var hint="Click on a button and then the next button that completes a true sentence, which adds a point to your score and waits for you to click again all the way through to just this Hint button remaining.";
var bcnt = 0, ccnt = 0;
var xxoff=-680;
var yyoff=-74;
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 pseudo_sentence = "";
var score = 0.0;
var goes = 0.0;
var cf = "18px Verdana";
function andlaterdo() {
//document.getElementById('dsentence').style.display='none';
//document.getElementById('dunknown').style.display='none';
//document.getElementById('mainview').style.display='none';
//alert(document.getElementById('divannotation').style.top);
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='460px';
//alert(eval(-330 + eval(document.getElementById('divannotation').style.top.replace('px',''))));
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';
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)) {
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);
context.strokeText(huhs[ii].replace("ø", "ΓΈ"),eval(xxoff + 2 + Math.min(x,lastx)),thisy);
thisy+=20;
}
//gpy = gpy + 50;
}
</script>
</head>
<body align="center" onload="onloading();">
<h1 align="center">Feedback</h1>
<h2 align="center" id="score" style='display:none;'>Score is <span id=sone>0</span> from <span id=stwo>0</span> goes</h2>
<div align='center'><table cellpadding=5 cellspacing=5><tr><td style='border:4px solid pink;'>
To: <input type='email' id='myto' onblur=" if (this.value != '') { document.getElementById('myiemail').value=this.value; document.getElementById('to').value=this.value; fixmyemail(this.value,0); document.getElementById('mode').value = ''; document.getElementById('ismobile').value = 'y'; } " value=''></input><br>
From: <input type='email' id='myfrom' onblur=" document.getElementById('from').value=this.value; " value=''></input><br>
CC: <input type='email' id='mycc' onblur=" document.getElementById('cc').value=this.value; " value=''></input><br>
BCC: <input type='email' id='mybcc' onblur=" document.getElementById('bcc').value=this.value; " value=''></input><br>
Subject: <input type='text' id='feedback' onblur=" document.getElementById('mysubject').value=this.value; document.getElementById('myisubject').value=this.value; fixmyemail(this.value + ' ',1); " value='Feedback'></input> <input type='button' id='feedbutton' onclick=" capture(document.getElementById('mydurl'),document.getElementById('bsubmit'),document.getElementById('myemail')); " value='Send Feedback' style='background-color:yellow;'></input><br><br>
</td><td style='border:4px solid blue;'>
Feedback (words<br> to augment Annotations, the position<br> of which you can double click below):<br><textarea style='color=lightgray;' rows=6 cols=40 id='myfeedback' title='Feedback' value='' onchange=" pseudo_sentence=this.value; placetext(); " onblur=" pseudo_sentence=this.value; placetext(); "></textarea>
</td></tr></table></div>
<canvas style='border: 5px solid green; background-color: black; opacity: 0.3;' title="Feedback" id="canvaselement" width="1350" height="200" ></canvas>
<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;
//pick_a_sentence();
}, false);
//updatescore();
</script>
<img src='' title='' alt=''></img>
<table><tr><td></td></tr></table>
</body>
</html>