<html>
<head>
<title>Canvas HTML Element Tic Tac Toe Game Tutorial ... RJM Programming ... June 2014 ... 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 language="JavaScript">
var gpx = 200;
var gpy = 80;
var gpttext = "";
var cf = "64px Verdana";

var moveid = "drag0-1"; // + parseInt(Math.round(Math.random() * 1));

var asknowat = 10;
var currasknowat = 0;

var score = 0.0;
var goes = 0.0;
var alreadydone = 0;

var arr9 = [0,0,0,0,0,0,0,0,0];

var image_index = 0;
var number_of_image = 0;

var file_there = -1;
var suffixi = "";
var clientip = "0 ";
var endusual = 0;
var justyou = -1;
var pickthisfirst = -1;
var ourtitle = "";
var preprefix = "Street Art -";
var ourprefix = "Street Art -";
var xuploads = 0;
var zuploads = 0;
var hasbeenclicked = 0;
var NumOpen = 0;
var bigrandnumber; // = parseInt(Math.round(Math.random() * 90000000));

var cgoes="";
var v11=0;
var v12=0;
var v13=0;
var v21=0;
var v22=0;
var v23=0;
var v31=0;
var v32=0;
var v33=0;
var cscore=0;
var dscore=0;
var yscore=0;

function newgame() {
if (alreadydone == 0) {
//alert(999);
alreadydone = 1;
cgoes = "";
arr9 = [0,0,0,0,0,0,0,0,0];
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.width = elem.width;
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;
elem.style.backgroundColor = thiscol;
//moveid = "drag0" + parseInt(Math.round(Math.random() * 1));
context.drawImage(document.getElementById('grid'), 0, 0);
for (var ijj=0; ijj<10; ijj++) {
document.getElementById("drag" + ijj).style.display = 'block';
}
v11=0;
v12=0;
v13=0;
v21=0;
v22=0;
v23=0;
v31=0;
v32=0;
v33=0;
var huh;
huh = document.getElementById("11");
huh.src = "http://www.rjmprogramming.com.au/wordpress/ttnone.png";
huh = document.getElementById("12");
huh.src = "http://www.rjmprogramming.com.au/wordpress/ttnone.png";
huh = document.getElementById("13");
huh.src = "http://www.rjmprogramming.com.au/wordpress/ttnone.png";
huh = document.getElementById("21");
huh.src = "http://www.rjmprogramming.com.au/wordpress/ttnone.png";
huh = document.getElementById("22");
huh.src = "http://www.rjmprogramming.com.au/wordpress/ttnone.png";
huh = document.getElementById("23");
huh.src = "http://www.rjmprogramming.com.au/wordpress/ttnone.png";
huh = document.getElementById("31");
huh.src = "http://www.rjmprogramming.com.au/wordpress/ttnone.png";
huh = document.getElementById("32");
huh.src = "http://www.rjmprogramming.com.au/wordpress/ttnone.png";
huh = document.getElementById("33");
huh.src = "http://www.rjmprogramming.com.au/wordpress/ttnone.png";
} //else {
//alert(888);
//}
}

function doit(imgo) {
var wi = 0;
var nxt = null;
var suffix = imgo.id;
//alert(cgoes);
if (cgoes.indexOf(";" + suffix + ";") != -1) {
alert("Huh?" + cgoes);
} else {
imgo.src = "http://www.rjmprogramming.com.au/wordpress/ttcross.png";
cgoes = cgoes + ";" + suffix + ";";
//var paris=document.getElementById('t' + suffix);
//console.log(paris.innerHTML);
//alert(paris.innerHTML);
switch(suffix)
{
case '11':
v11 = 1;
if (eval(v11 + v12 + v13) == 3 || eval(v11 + v21 + v31) == 3 || eval(v11 + v22 + v33) == 3) wi = 1;
break;
case '12':
v12 = 1;
if (eval(v11 + v12 + v13) == 3 || eval(v12 + v22 + v32) == 3) wi = 1;
break;
case '13':
v13 = 1;
if (eval(v11 + v12 + v13) == 3 || eval(v13 + v23 + v33) == 3 || eval(v13 + v22 + v31) == 3) wi = 1;
break;
case '21':
v21 = 1;
if (eval(v21 + v22 + v23) == 3 || eval(v11 + v21 + v31) == 3) wi = 1;
break;
case '22':
v22 = 1;
if (eval(v21 + v22 + v23) == 3 || eval(v12 + v22 + v32) == 3 || eval(v11 + v22 + v33) == 3 || eval(v13 + v22 + v31) == 3) wi = 1;
break;
case '23':
v23 = 1;
if (eval(v21 + v22 + v23) == 3 || eval(v13 + v23 + v33) == 3) wi = 1;
break;
case '31':
v31 = 1;
if (eval(v31 + v32 + v33) == 3 || eval(v13 + v22 + v31) == 3 || eval(v11 + v21 + v31) == 3) wi = 1;
break;
case '32':
v32 = 1;
if (eval(v31 + v32 + v33) == 3 || eval(v12 + v22 + v32) == 3) wi = 1;
break;
case '33':
v33 = 1;
if (eval(v31 + v32 + v33) == 3 || eval(v13 + v23 + v33) == 3 || eval(v11 + v22 + v33) == 3) wi = 1;
break;

default:
break;
}

if (wi == 1) {
yscore = yscore + 1;
document.title = "Congratulations! You win. Scores: Computer " + cscore + " vs You " + yscore + " (" + dscore + " draws)";
alert(document.title);
alreadydone = 0;
setTimeout(newgame, 2000);

} else if (wi == 0) {
if (v22 == 0 && (eval(v21 + v22 + v23) == -2 || eval(v12 + v22 + v32) == -2 || eval(v11 + v22 + v33) == -2 || eval(v13 + v22 + v31) == -2)) {
v22 = -1;
wi = -1;
nxt = document.getElementById('22');
} else if (v11 == 0 && (eval(v11 + v12 + v13) == -2 || eval(v11 + v21 + v31) == -2 || eval(v11 + v22 + v33) == -2)) {
v11 = -1;
wi = -1;
nxt = document.getElementById('11');
} else if (v13 == 0 && (eval(v11 + v12 + v13) == -2 || eval(v13 + v23 + v33) == -2 || eval(v13 + v22 + v31) == -2)) {
v13 = -1;
wi = -1;
nxt = document.getElementById('13');
} else if (v31 == 0 && (eval(v31 + v32 + v33) == -2 || eval(v13 + v22 + v31) == -2 || eval(v11 + v21 + v31) == -2)) {
v31 = -1;
wi = -1;
nxt = document.getElementById('31');
} else if (v33 == 0 && (eval(v31 + v32 + v33) == -2 || eval(v13 + v23 + v33) == -2 || eval(v11 + v22 + v33) == -2)) {
v33 = -1;
wi = -1;
nxt = document.getElementById('33');

} else if (v12 == 0 && (eval(v11 + v12 + v13) == -2 || eval(v12 + v22 + v32) == -2)) {
v12 = -1;
wi = -1;
nxt = document.getElementById('12');
} else if (v21 == 0 && (eval(v21 + v22 + v23) == -2 || eval(v11 + v21 + v31) == -2)) {
v21 = -1;
wi = -1;
nxt = document.getElementById('21');
} else if (v23 == 0 && (eval(v21 + v22 + v23) == -2 || eval(v13 + v23 + v33) == -2)) {
v23 = -1;
wi = -1;
nxt = document.getElementById('23');
} else if (v32 == 0 && (eval(v31 + v32 + v33) == -2 || eval(v12 + v22 + v32) == -2)) {
v32 = -1;
wi = -1;
nxt = document.getElementById('32');
}
if (wi != 0) {
nxt.src = "http://www.rjmprogramming.com.au/wordpress/ttcircle.png";
cgoes = cgoes + ";" + nxt.id + ";";
cscore = cscore + 1;
document.title = "Computer wins! Bad luck. Scores: Computer " + cscore + " vs You " + yscore + " (" + dscore + " draws)";
alert(document.title);
alreadydone = 0;
setTimeout(newgame, 2000);
}
if (wi == 0) {
if (v22 == 0 && (eval(v21 + v22 + v23) == 2 || eval(v12 + v22 + v32) == 2 || eval(v11 + v22 + v33) == 2 || eval(v13 + v22 + v31) == 2)) {
v22 = -1;
nxt = document.getElementById('22');
} else if (v11 == 0 && (eval(v11 + v12 + v13) == 2 || eval(v11 + v21 + v31) == 2 || eval(v11 + v22 + v33) == 2)) {
v11 = -1;
nxt = document.getElementById('11');
} else if (v13 == 0 && (eval(v11 + v12 + v13) == 2 || eval(v13 + v23 + v33) == 2 || eval(v13 + v22 + v31) == 2)) {
v13 = -1;
nxt = document.getElementById('13');
} else if (v31 == 0 && (eval(v31 + v32 + v33) == 2 || eval(v13 + v22 + v31) == 2 || eval(v11 + v21 + v31) == 2)) {
v31 = -1;
nxt = document.getElementById('31');
} else if (v33 == 0 && (eval(v31 + v32 + v33) == 2 || eval(v13 + v23 + v33) == 2 || eval(v11 + v22 + v33) == 2)) {
v33 = -1;
nxt = document.getElementById('33');

} else if (v12 == 0 && (eval(v11 + v12 + v13) == 2 || eval(v12 + v22 + v32) == 2)) {
v12 = -1;
nxt = document.getElementById('12');
} else if (v21 == 0 && (eval(v21 + v22 + v23) == 2 || eval(v11 + v21 + v31) == 2)) {
v21 = -1;
nxt = document.getElementById('21');
} else if (v23 == 0 && (eval(v21 + v22 + v23) == 2 || eval(v13 + v23 + v33) == 2)) {
v23 = -1;
nxt = document.getElementById('23');
} else if (v32 == 0 && (eval(v31 + v32 + v33) == 2 || eval(v12 + v22 + v32) == 2)) {
v32 = -1;
nxt = document.getElementById('32');
} else if (v22 == 0) {
v22 = -1;
nxt = document.getElementById('22');
} else if (v11 == 0) {
v11 = -1;
nxt = document.getElementById('11');
} else if (v13 == 0) {
v13 = -1;
nxt = document.getElementById('13');
} else if (v31 == 0) {
v31 = -1;
nxt = document.getElementById('31');
} else if (v33 == 0) {
v33 = -1;
nxt = document.getElementById('33');
} else if (v12 == 0) {
v12 = -1;
nxt = document.getElementById('12');
} else if (v21 == 0) {
v21 = -1;
nxt = document.getElementById('21');
} else if (v23 == 0) {
v23 = -1;
nxt = document.getElementById('23');
} else if (v32 == 0) {
v32 = -1;
nxt = document.getElementById('32');
} else {
dscore = dscore + 1;
document.title = "It is a draw. Well played. Scores: Computer " + cscore + " vs You " + yscore + " (" + dscore + " draws)";
alert(document.title);
alreadydone = 0;
setTimeout(newgame, 2000);
}
if (nxt != null) {
nxt.src = "http://www.rjmprogramming.com.au/wordpress/ttcircle.png";
cgoes = cgoes + ";" + nxt.id + ";";
}
}
}
}
return nxt;
}

function checkGet() {
if (window.location.search.indexOf("score") != (0 - 1)) {

var myprmstr = window.location.search.substr(1);
//alert(myprmstr);

var xpos = myprmstr.indexOf("goes");
if (xpos != -1) {
document.getElementById('myh1').innerHTML = document.getElementById('myh1').innerHTML.replace(' start ', ' resume ');

var gsuff = myprmstr.substr(xpos + 5);
goes = parseFloat(gsuff);
//alert(goes + ' ' + myprmstr.substr(xpos + 5));
myprmstr = myprmstr.substr(0, (xpos - 2));
}
xpos = myprmstr.indexOf("score");
if (xpos != -1) {
var ssuff = myprmstr.substr(xpos + 6);
score = parseFloat(ssuff);
}
}
context.drawImage(document.getElementById('grid'), 0, 0);
}

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
var jjj=eval(ev.target.id.replace("drag", "")) % 2;
if (moveid.length > 5) {
for (var ijj=0; ijj<10; ijj++) {
if (eval(ijj % 2) != eval(jjj % 2)) {
document.getElementById("drag" + ijj).style.display = 'none';
}
}
}
moveid = ev.target.id;
ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
alreadydone = 1;
var jj = 0;
var evpageX = ev.pageX, evpageX2;
var evpageY = ev.pageY, evpageY2;
ev.preventDefault();
var data = null, data2 = null;
var andthen = null;
var thisnum = eval(moveid.replace("drag", ""));
if (thisnum == 9) {
data2 = document.getElementById("drag00");
} else if (thisnum == 0) {
data2 = document.getElementById("drag01");
} else {
data2 = document.getElementById("drag0" + (eval(-1 + thisnum) % 2));
}

var jjj=eval(thisnum + 1) % 2;
for (var ijj=0; ijj<10; ijj++) {
if (eval(ijj % 2) == eval(jjj % 2)) {
document.getElementById("drag" + ijj).style.display = 'none';
}
}

try {
data = document.getElementById(moveid);
//data = ev.dataTransfer.getData("Text");
//if (data == null) {
// data = document.getElementById(moveid);
//}
} catch (ex) {
data = document.getElementById(moveid);
}

if (eval(ev.pageX) <= 361 && eval(ev.pageY) <= 236) { // 1,1
evpageX = 100;
evpageY = 70;
jj = 0;
if (arr9[jj] == 0) andthen = doit(document.getElementById('11'));
//if (arr9[jj] == 0) cgoes = cgoes + ";" + andthen.id + ";"
} else if (eval(ev.pageX) <= 733 && eval(ev.pageY) <= 236) { // 1,2
evpageX = 460;
evpageY = 70;
jj = 1;
if (arr9[jj] == 0) andthen = doit(document.getElementById('12'));
//if (arr9[jj] == 0) cgoes = cgoes + ";" + andthen.id + ";"
} else if (eval(ev.pageY) <= 236) { // 1,3
evpageX = 840;
evpageY = 70;
jj = 2;
if (arr9[jj] == 0) andthen = doit(document.getElementById('13'));
//if (arr9[jj] == 0) cgoes = cgoes + ";" + andthen.id + ";"
} else if (eval(ev.pageX) <= 361 && eval(ev.pageY) <= 501) { // 2,1
evpageX = 100;
evpageY = 300;
jj = 3;
if (arr9[jj] == 0) andthen = doit(document.getElementById('21'));
//if (arr9[jj] == 0) cgoes = cgoes + ";" + andthen.id + ";"
} else if (eval(ev.pageX) <= 733 && eval(ev.pageY) <= 501) { // 2,2
evpageX = 460;
evpageY = 300;
jj = 4;
if (arr9[jj] == 0) andthen = doit(document.getElementById('22'));
//if (arr9[jj] == 0) cgoes = cgoes + ";" + andthen.id + ";"
} else if (eval(ev.pageY) <= 501) { // 2,3
evpageX = 840;
evpageY = 300;
jj = 5;
if (arr9[jj] == 0) andthen = doit(document.getElementById('23'));
//if (arr9[jj] == 0) cgoes = cgoes + ";" + andthen.id + ";"
} else if (eval(ev.pageX) <= 361) { // 3,1
evpageX = 100;
evpageY = 530;
jj = 6;
if (arr9[jj] == 0) andthen = doit(document.getElementById('31'));
//if (arr9[jj] == 0) cgoes = cgoes + ";" + andthen.id + ";"
} else if (eval(ev.pageX) <= 733) { // 3,2
evpageX = 460;
evpageY = 530;
jj = 7;
if (arr9[jj] == 0) andthen = doit(document.getElementById('32'));
//if (arr9[jj] == 0) cgoes = cgoes + ";" + andthen.id + ";"
} else { // 3,3
evpageX = 840;
evpageY = 530;
jj = 8;
if (arr9[jj] == 0) andthen = doit(document.getElementById('33'));
//if (arr9[jj] == 0) cgoes = cgoes + ";" + andthen.id + ";"
}

//
//alert(data.width + " and " + eval(ev.pageX) + " and " + eval(ev.pageY));
if (arr9[jj] == 0) {
arr9[jj] = 1;

if (1 == 1) {
context.drawImage(data, eval(evpageX), eval(evpageY), eval(elem.width / 6), eval(elem.height / 6));
} else {
ev.target.appendChild(document.getElementById(data));
}

data.style.display = 'none';

if (andthen != null) {
var athen = andthen.id;

if (athen == "11") { // 1,1
evpageX2 = 100;
evpageY2 = 70;
jj = 0;
} else if (athen == "12") { // 1,2
evpageX2 = 460;
evpageY2 = 70;
jj = 1;
} else if (athen == "13") { // 1,3
evpageX2 = 840;
evpageY2 = 70;
jj = 2;
} else if (athen == "21") { // 2,1
evpageX2 = 100;
evpageY2 = 300;
jj = 3;
} else if (athen == "22") { // 2,2
evpageX2 = 460;
evpageY2 = 300;
jj = 4;
} else if (athen == "23") { // 2,3
evpageX2 = 840;
evpageY2 = 300;
jj = 5;
} else if (athen == "31") { // 3,1
evpageX2 = 100;
evpageY2 = 530;
jj = 6;
} else if (athen == "32") { // 3,2
evpageX2 = 460;
evpageY2 = 530;
jj = 7;
} else { // 3,3
evpageX2 = 840;
evpageY2 = 530;
jj = 8;
}
//alert(evpageX2);
arr9[jj] = 1;
//alert(evpageY2);
if (1 == 1) {
context = elem.getContext('2d');
context.drawImage(data2, eval(evpageX2), eval(evpageY2), eval(elem.width / 6), eval(elem.height / 6));
} else {
ev.target.appendChild(document.getElementById(data2));
}

//alert(elem.width + "andthen=" + data2.id + " evpageX=" + evpageX + " evpageY=" + evpageY);
}

} //else {
//alert('Huh?');
//}

}

</script>
</head>

<body style="background-color: lightgray;" onload="if (moveid == 'drag0-1') { moveid = 'drag0' + parseInt(Math.round(Math.random() * 1)); } checkGet();">


<table style="position:absolute; top:0; left:0; z-index:8;" width="100%" cellpadding=5 cellspacing=5><tr><td width="90%">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="position:absolute; top:0; left:0; z-index:9;">

<canvas style='position:absolute; top: 0; left:0; border: 12px solid red; background-color: white; opacity: 0.99;' title='Tic Tac Toe' id="canvaselement" width="1100" height="800" style="border: 1px solid green;" />
</div>
</td><td align="left" width="10%" style="border: 8px solid pink; "><h1>Tic Tac Toe <br>(click left<br>or drag<br>& drop) </h1><div id='dmy' style='display:none;"><br>Score <span style='color:green;' id="score">0</span><br> via <span style='color:red;' id="goes">0</span> goes<br><br></div>
<img id="drag0" src="cross.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
<img id="drag1" src="nought.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
<img id="drag2" src="cross.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
<img id="drag3" src="nought.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
<img id="drag4" src="cross.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
<img id="drag5" src="nought.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
<img id="drag6" src="cross.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
<img id="drag7" src="nought.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
<img id="drag8" src="cross.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
<img id="drag9" src="nought.jpg" draggable="true" ondragstart="drag(event)" width="100" height="65">
</td></tr></table>
<img id="grid" src="grid.jpg" style="display:none;"><br>
<img id="drag00" src="cross.jpg" style="display:none;" width="100" height="100"><br>
<img id="drag01" src="nought.jpg" style="display:none;" width="100" height="100"><br>

<div id='oldtttg' style="display:none;">
<h1>You say Tic Tac Toe ... I say Noughts and Crosses</h1>
<table title='Click a box to make your move in Noughts and Crosses game against Computer' ondblclick='window.open("http://www.rjmprogramming.com.au/Games/Noughtsandcrosses/","_blank");'>
<tbody style="background-color:pink;">
<tr>
<td style="border-right: 2px solid red;border-bottom: 2px solid red;" id="t11"><img id="11" src="http://www.rjmprogramming.com.au/wordpress/ttnone.png" onclick="doit(this);" /></td>
<td style="border-bottom: 2px solid red;" id="t12"><img id="12" src="http://www.rjmprogramming.com.au/wordpress/ttnone.png" onclick="doit(this);" /></td>
<td style="border-left: 2px solid red;border-bottom: 2px solid red;" id="t13"><img id="13" src="http://www.rjmprogramming.com.au/wordpress/ttnone.png" onclick="doit(this);" /></td>
</tr>
<tr>
<td style="border-right: 2px solid red;" id="t21"><img id="21" src="http://www.rjmprogramming.com.au/wordpress/ttnone.png" onclick="doit(this);" /></td>
<td id="t22"><img id="22" src="http://www.rjmprogramming.com.au/wordpress/ttnone.png" onclick="doit(this);" /></td>
<td style="border-left: 2px solid red;" id="t23"><img id="23" src="http://www.rjmprogramming.com.au/wordpress/ttnone.png" onclick="doit(this);" /></td>
</tr>
<tr>
<td style="border-right: 2px solid red;border-top: 2px solid red;" id="t31"><img id="31" src="http://www.rjmprogramming.com.au/wordpress/ttnone.png" onclick="doit(this);" /></td>
<td style="border-top: 2px solid red;" id="t32"><img id="32" src="http://www.rjmprogramming.com.au/wordpress/ttnone.png" onclick="doit(this);" /></td>
<td style="border-left: 2px solid red;border-top: 2px solid red;" id="t33"><img id="33" src="http://www.rjmprogramming.com.au/wordpress/ttnone.png" onclick="doit(this);" /></td>
</tr>
</tbody>
</table>
<a href="#post-454" title="Coward's way out?" onclick="alreadydone=0; setInterval(newgame,2000);">New game</a>

</div>

<script language="JavaScript">

var scoretoget = 20;

var elem = document.getElementById('canvaselement');
var elemLeft = elem.offsetLeft;
var elemTop = elem.offsetTop;
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) {

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];

if (moveid == "drag0-1") {
elem.width = elem.width;
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;
elem.style.backgroundColor = thiscol;
moveid = "drag0" + parseInt(Math.round(Math.random() * 1));
context.drawImage(document.getElementById('grid'), 0, 0);
} else {
drop(event);
}

}, false);

function placetext() {
if (currasknowat >= asknowat) {
goes = eval(goes + 1);
var answer = prompt("Please answer the problem ... hope you remember it? If you have no calculator, quote it back to us accurately, and that will do.", "0");
if (Math.abs(eval(answer + " - (" + gpttext + ")")) < 0.01) {
score = eval(score + 1);
} else {
alert("Bad luck! " + gpttext + " = " + eval(gpttext));
}
gpttext = "";
currasknowat = 0;
}
var huhx = Math.floor((Math.random() * 200) + 1);
var stuff = "";
var oper = ["+", "-", "/", "*", "*"];
var huho = Math.floor((Math.random() * 4) + 0);
context.font = cf;
if (gpttext == "") {
asknowat = Math.floor((Math.random() * 4) + 2);
stuff = huhx + " " + oper[huho] + " ";
huhx = Math.floor((Math.random() * 200) + 1);
stuff = stuff + huhx;
gpttext = stuff;
stuff = stuff + " ... ";
} else {
stuff = " " + oper[huho] + " " + huhx;
gpttext = gpttext + stuff;
stuff = " ... " + stuff;
}
//alert(stuff);
context.clearRect ( 0 , 0 , 1150 , 500 );
if (currasknowat < asknowat) {
currasknowat = eval(currasknowat + 1);
}
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;

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;
context.strokeText(stuff,gpx,gpy);
//gpy = gpy + 50;
setTimeout(placetext, 2000);
}

</script>

</body>
</html>