<!doctype html>
<html>
<head>
<title>Canvas HTML Element Pros and Cons Primer Tutorial ... RJM Programming ... March 2015 ... 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'>
<style>
body {
background-color: lightblue;
padding-top: 20px;
background: -webkit-linear-gradient(center top , rgb(255, 255, 0), rgb(0, 255, 255)) repeat scroll 0% 0% transparent;
background: -o-linear-gradient(center top , rgb(255, 255, 0), rgb(0, 255, 255)) repeat scroll 0% 0% transparent;
background: -moz-linear-gradient(center top , rgb(255, 255, 0), rgb(0, 255, 255)) repeat scroll 0% 0% transparent;
background: linear-gradient(180deg, rgb(255, 255, 0), rgb(0, 255, 255)); /* linear-gradient(center top , rgb(255, 255, 0), rgb(0, 255, 255)) repeat scroll 0% 0% transparent */
}
</style>

<script language="JavaScript">

var threehundred=300;

var topic='';
var issuedata=[''];
var thisissue='';
var ofstring=' 1';
var iof=1;

var twothousand=2000;
var ask="y";
var info="";
var infoemail="fill.in.email@address";
var gptext="";

var cfb = "18px Verdana";
var cf = "14px Verdana";

var firsttime=1;

var iscanvas=-1;

var score=3000;
var goes=0;

var wis=400;
var his=400;

//var elemzero;
//var elemLeftzero;
//var elemTopzero;
//var contextzero;

var firstX = -999.0;
var firstY = -999.0;
var secondX = -999.0;
var secondY = -999.0;

var yourfirstX = -999.0;
var yourfirstY = -999.0;
var yoursecondX = -999.0;
var yoursecondY = -999.0;

var elem; //= document.getElementById('canvaselement');
var elemLeft; //= elem.offsetLeft;
var elemTop; //= elem.offsetTop;
var context; //= elem.getContext('2d');

//var elemzero; //= document.getElementById('canvaselement');
//var elemLeftzero; //= elem.offsetLeft;
//var elemTopzero; //= elem.offsetTop;
//var contextzero; //= elem.getContext('2d');

function onl() {
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();
document.getElementById('myfname').value = "prosandcons_" + yyyy + "_" + mm + "_" + hh + "_" + minm + "_" + ss + ".png";
}

function andthen() {
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect ( 0 , 0 , elem.width, elem.height);
//contextzero.setTransform(1, 0, 0, 1, 0, 0);
//contextzero.clearRect ( 0 , 0 , elemzero.width, elemzero.height );

yourfirstX = -999.0;
yourfirstY = -999.0;
nextbit();
}

function nextyourbit() {
context.strokeStyle = "pink";
context.beginPath();
context.arc((yourfirstX + ((secondX - firstX) / 2.0)), (yourfirstY + ((secondY - firstY) / 2.0)), (Math.sqrt((secondX - firstX)*(secondX - firstX) + (secondY - firstY)*(secondY - firstY)) / 2.0),0,2*Math.PI);
context.stroke();

context.fillStyle = "yellow";
context.beginPath();
context.arc(yourfirstX, yourfirstY,2,0,2*Math.PI);
context.fill();

context.strokeStyle = "yellow";
context.beginPath();
context.moveTo(yourfirstX, yourfirstY);
context.lineTo(eval(yourfirstX + (secondX - firstX)), eval(yourfirstY + (secondY - firstY)));
context.stroke();

context.fillStyle = "green";
context.beginPath();
context.arc(eval(yourfirstX + (secondX - firstX)), eval(yourfirstY + (secondY - firstY)),5,0,2*Math.PI);
context.fill();

var stuff="You missed the Pros and Cons by (" + eval(yoursecondX - (yourfirstX + (secondX - firstX))) + "," + eval(yoursecondY - (yourfirstY + (secondY - firstY))) + ")";
goes = goes + 1;
score = eval(score - Math.abs(eval(yoursecondX - (yourfirstX + (secondX - firstX)))) - Math.abs(eval(yoursecondY - (yourfirstY + (secondY - firstY)))));
document.getElementById('myh3').innerHTML = "Score: " + score + " Goes: " + goes + "<br>" + stuff.replace("You missed the Pros and Cons by (0,0)", "Congratulations! Hole in one!");
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
info=(" ... " + stuff + " ... " + "Score: " + score + " Goes: " + goes).replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!").replace(/ /g, "%20");
var xinfoemail=document.getElementById('mylemail').value.replace("fill.in.email@address", "");
if (xinfoemail.indexOf("@") != -1) infoemail=xinfoemail;
if (xinfoemail.indexOf("@") != -1) {
document.getElementById('mymobile').value=document.getElementById('myemail').href.replace('T&body=', 'T' + info + '&body=').replace('fill.in.email@address', infoemail);
context.strokeStyle = "blue";
context.font = cf;
context.strokeText((stuff).replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!").replace(" the ", " "),5,30);
context.strokeText((" ... " + "Score: " + score + " Goes: " + goes).replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!").replace(" the ", " "),5,60);
}
setTimeout(andthen, twothousand);
} else {
info=(" ... " + stuff + " ... " + "Score: " + score + " Goes: " + goes).replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!").replace(/ /g, "%20");
gptext=(stuff + " ... " + "Score: " + score + " Goes: " + goes).replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!");
var myans="";
if (ask != "") {
if (ask == "y" && document.getElementById('mylemail').value.replace("fill.in.email@address", "") == "") {
myans=prompt(stuff.replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!") + " ... and you can email snapshot by answering with anything (eg. email address) or Cancel for no email, ever ... NB. on next click (or double click) helper line should appear", document.getElementById('mylemail').value.replace("fill.in.email@address", ""));
if (myans == null) {
ask="";
} else {
ask="Y";
}
} else {
myans=prompt(stuff.replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!") + " ... and you can email snapshot by answering with anything (eg. email address) or Cancel for no email ... NB. on next click (or double click) helper line should appear", document.getElementById('mylemail').value.replace("fill.in.email@address", ""));
}
} else {
alert(stuff.replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!"));
}
if (myans != null) {
if (myans != "") {
if (myans.indexOf("@") != -1) {
infoemail=myans;
document.getElementById('mylemail').value=myans.replace("fill.in.email@address", "");
document.getElementById('myiframe').src='./prosandcons.php?set=' + myans.replace("fill.in.email@address", "");
} else {
infoemail=document.getElementById('mylemail').value.replace("fill.in.email@address", "");
}
snapshot();
}
}
info="";
infoemail="fill.in.email@address";
andthen();
}

}

function nextbit() {
if (firsttime == 1) {
var pemail=prompt("Optionally, if you want to email snapshots, who would it be to? Cancel for no emails in this session.", document.getElementById('mylemail').value.replace("fill.in.email@address", ""));
if (pemail != null) {
if (pemail.replace("fill.in.email@address", "").indexOf("@") != -1) {
document.getElementById('mylemail').value=pemail.replace("fill.in.email@address", "");
document.getElementById('myh2').innerHTML = "Email " + pemail.replace("fill.in.email@address", "") + " <br>via click/touch outside canvases<br>" + document.getElementById('myh2').innerHTML;
document.getElementById('myiframe').src='./prosandcons.php?set=' + pemail.replace("fill.in.email@address", "");
twothousand=9000;
}
} else {
ask="";
}
firstX = 5;
} else {
firstX = Math.floor((Math.random()*wis)+50);
}
firstY = Math.floor((Math.random()*his)+50);
//contextzero.beginPath();
//contextzero.lineWidth="2";
//contextzero.fillStyle = "green";
//contextzero.strokeStyle="black"; // Black path
//contextzero.moveTo(firstX, firstY);
if (firsttime == 1) {
secondX = 5;
} else {
secondX = Math.floor((Math.random()*wis)+50);
}
secondY = Math.floor((Math.random()*his)+50);

//contextzero.lineTo(secondX, secondY);
//contextzero.stroke();
//contextzero.fillStyle = "yellow";
//contextzero.beginPath();
//contextzero.arc(((secondX + firstX) / 2.0), ((secondY + firstY) / 2.0), (Math.sqrt((secondX - firstX)*(secondX - firstX) + (secondY - firstY)*(secondY - firstY)) / 2.0),0,2*Math.PI);
//contextzero.fill();

//contextzero.beginPath();
//contextzero.lineWidth="1";
//contextzero.fillStyle = "green";
//if (firsttime == 1) {
//contextzero.strokeStyle="magenta";
//} else {
//contextzero.strokeStyle="brown"; // Brown path
//}
//contextzero.moveTo((firstX - ((secondY - firstY) / 2.0)), (firstY + ((secondX - firstX) / 2.0)));
//contextzero.lineTo((firstX + ((secondY - firstY) / 2.0)), (firstY - ((secondX - firstX) / 2.0)));
//contextzero.stroke();

firsttime=0;
}

function drawt() {
onl();
//elemzero = document.getElementById('canvaselementzero');
//elemLeftzero = elemzero.offsetLeft;
//elemTopzero = elemzero.offsetTop;

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
twothousand=9000;
wis = eval(wis / 2);
//elemzero.width = eval(500 / 2);
//elemzero.style.left = eval(510 / 2);
} else {
firsttime=0;
//document.getElementById('mylemail').style.display='block';
}

//contextzero = elemzero.getContext('2d');
nextbit();

}

function capture(toh, tos, toe, toehref) {
//alert(0);
var things = document.URL.split("?");
var tis=toehref.split("body=");
toe.href = tis[0] + "body=" + (things[0].replace("#","") + "/~").replace("prosandcons.html/~", document.getElementById('myfname').value).replace("index.html/~", document.getElementById('myfname').value).replace("//~", "/" + document.getElementById('myfname').value).replace("/~", "/" + document.getElementById('myfname').value);
var pretoh = elem.toDataURL();
toh.value = pretoh.substr(22, pretoh.length);
tos.click();
//alert(1);
if (twothousand == 2000) {
//alert(toe.href);
toe.click();
//alert(111);
} else {
//alert(1111);
document.getElementById('myh2').innerHTML=document.getElementById('myh2').innerHTML.replace('Email ', 'Emailed ');
//alert(11111);
}
//alert(10);
setTimeout(onl, 2000);
}

function presnapshot() {
if (yourfirstX != -999.0 || yourfirstY != -999.0) {
infoemail=document.getElementById('mylemail').value.replace("fill.in.email@address", "");
if (infoemail.indexOf("@") != -1) snapshot();
return infoemail;
}
return '';
}

function snapshot() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
var xinfoemail=document.getElementById('mylemail').value.replace("fill.in.email@address", "");
if (xinfoemail.indexOf("@") != -1) document.getElementById('mymobile').value=document.getElementById('myemail').href.replace('Cons&body=', 'Cons' + info + '&body=').replace('fill.in.email@address', infoemail);
} //else {
//context.strokeStyle = "blue";
//context.font = cf;
//var pgt=gptext.split(" ... ");
//context.strokeText(pgt[0].replace(" the ", " "),5,30);
//context.strokeText(pgt[1].replace(" the ", " "),5,60);
//}
capture(document.getElementById('mydurl'),document.getElementById('submit'),document.getElementById('myemail'),document.getElementById('myemail').href.replace('Cons&body=', 'Cons' + info + '&body=').replace('fill.in.email@address', infoemail));
}

function postic() {
iscanvas=0;
}

function resetic() {
iscanvas=1;
document.getElementById('myh2').innerHTML=document.getElementById('myh2').innerHTML.replace('Emailed ', 'Email ');
//setTimeout(postic,400);
}

function later() {
document.getElementById('myh2').innerHTML=document.getElementById('myh2').innerHTML.replace('Emailed ', 'Email ');
if (iscanvas != 1) { if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (ask != '') { iscanvas=-1; var xif=presnapshot(); if (xif.indexOf('@') != -1) { document.getElementById('myh2').innerHTML=document.getElementById('myh2').innerHTML.replace('Email ', 'Emailed '); } } } }
iscanvas=0;
}

function ourdraw() {
var ii, total=0, prototal=0, contotal=0, things, ithing=0, biggestprod=0, biggestcond=0, dzero=0.0;
var diameters=[0], thisxpro=5, thisxcon=305, thisypro=90, thisycon=90, offs, iii;
var magnification = 5.0, offset=0;

context.strokeStyle = "black";
context.font = cfb;
topic = document.getElementById('topic').value.replace(/\n/g, "<br>").replace(",", " ");
info = "%20regarding%20" + topic.replace(/ /g, "%20").replace(/<br>/g, "%20");
if (topic.indexOf("<br>") != -1) {
offs = topic.split("<br>");
context.strokeText(offs[0],105, eval(offset + 30));
for (ii=1; ii<offs.length; ii++) {
offset = eval(30 + offset);
context.strokeText(offs[ii],105, eval(offset + 30));
}
} else {
context.strokeText(document.getElementById('topic').value,105, eval(offset + 30));
}

context.beginPath();
context.lineWidth="2";
context.strokeStyle="black"; // Black path
context.moveTo(0, eval(offset + 40));
context.lineTo(eval(threehundred * 2), eval(offset + 40));
context.stroke();
context.beginPath();
context.lineWidth="2";
context.strokeStyle="brown"; // Black path
context.moveTo(threehundred, eval(offset + 40));
context.lineTo(threehundred, 1500);
context.stroke();

context.strokeStyle = "green";
context.font = cfb;
context.strokeText("Pros",5,eval(offset + 60));
context.strokeStyle = "red";
context.font = cfb;
context.strokeText("Cons",eval(threehundred + 5),eval(offset + 60));

context.beginPath();
context.lineWidth="2";
context.strokeStyle="black"; // Black path
context.moveTo(0, eval(offset + 70));
context.lineTo(eval(threehundred * 2), eval(offset + 70));
context.stroke();

for (ii=1; ii<issuedata.length; ii++) {
things = issuedata[ii].split(",");
ithing = eval((things[1].replace("-", "")));
if (issuedata[ii].indexOf(",-") != -1) {
diameters.push(eval(-2.0 * Math.sqrt((ithing / Math.PI))));
if (biggestcond < eval(2.0 * Math.sqrt((ithing / Math.PI)))) biggestcond = eval(2.0 * Math.sqrt((ithing / Math.PI)));
contotal = eval(contotal + ithing); // (things[1].replace("-", "")));
total = eval(total - ithing); //(things[1].replace("-", "")));
//alert("Con: " + issuedata[ii] + " contotal=" + contotal + " prototal=" + prototal + " total=" + total + " thisdiameter=" + diameters[ii]);
} else {
if (biggestprod < eval(2.0 * Math.sqrt((ithing / Math.PI)))) biggestprod = eval(2.0 * Math.sqrt((ithing / Math.PI)));
diameters.push(eval(2.0 * Math.sqrt((ithing / Math.PI))));
prototal = eval(prototal + ithing); //(things[1]));
total = eval(total + ithing); // (things[1]));
//alert("Con: " + issuedata[ii] + " contotal=" + contotal + " prototal=" + prototal + " total=" + total + " thisdiameter=" + diameters[ii]);
}
}

dzero = eval(2.0 * Math.sqrt((Math.abs(total) / Math.PI)));
thisxpro = eval(thisxpro + biggestprod * magnification / 2.0);
thisxcon = eval(thisxcon + biggestcond * magnification / 2.0);

for (ii=1; ii<issuedata.length; ii++) {
things = issuedata[ii].split(",");
if (diameters[ii] < 0) { // con
context.fillStyle = "red";
context.beginPath();
if (thisycon == 90) {
thisycon = eval(thisycon + offset - (diameters[ii] * magnification / 2.0));
} else {
thisycon = eval(thisycon - (diameters[ii] * magnification / 1.0));
}
context.arc(thisxcon, thisycon, eval(-0.5 * (diameters[ii] * magnification)), 0, 2*Math.PI);
} else { // pro
context.fillStyle = "green";
context.beginPath();
if (thisypro == 90) {
thisypro = eval(thisypro + offset + (diameters[ii] * magnification / 2.0));
} else {
thisypro = eval(thisypro + (diameters[ii] * magnification / 1.0));
}
context.arc(thisxpro, thisypro, eval(0.5 * (diameters[ii] * magnification)), 0, 2*Math.PI);
}
context.fill();

offs = things[0].split("<br>");

if (diameters[ii] < 0) { // con
thisycon = eval(thisycon + 15 - (diameters[ii] * magnification / 2.0)); //+ 30);
context.strokeStyle = "red";
context.font = cf;
if (things[0].indexOf("<br>") != -1) {
context.strokeText(offs[0], thisxcon, thisycon);
for (iii=1; iii<offs.length; iii++) {
thisycon = eval(thisycon + 30);
context.strokeText(offs[iii], thisxcon, thisycon);
}
} else {
context.strokeText(things[0], thisxcon, thisycon);
}
} else { // pro
thisypro = eval(thisypro + 15 + (diameters[ii] * magnification / 2.0)); //+ 30);
context.strokeStyle = "green";
context.font = cf;
if (things[0].indexOf("<br>") != -1) {
context.strokeText(offs[0], thisxpro, thisypro);
for (iii=1; iii<offs.length; iii++) {
thisypro = eval(thisypro + 30);
context.strokeText(offs[iii], thisxpro, thisypro);
}
} else {
context.strokeText(things[0], thisxpro, thisypro);
}
}

}

if (issuedata.length > 1 && thisypro >= thisycon) {
context.beginPath();
context.strokeStyle="black"; // Black path
context.moveTo(0, eval(thisypro + 30));
context.lineTo(eval(threehundred * 2), eval(thisypro + 30));
context.stroke();
thisypro = eval(thisypro + 100.0 + (dzero * magnification / 2.0));
thisxpro = eval(threehundred - (dzero * magnification / 2.0));
context.beginPath();

if (eval(total) < 0) {
context.fillStyle = "red";
} else {
context.fillStyle = "green";
}

if (contotal != 0) { // && prototal != 0
thisxpro = eval(thisxpro + eval(contotal / eval(contotal + prototal)) * (dzero * magnification / 2.0));
}

context.arc(thisxpro, thisypro, eval(0.5 * (dzero * magnification)), 0, 2*Math.PI);
context.fill();

thisypro = eval(thisypro + 60);
context.beginPath();
context.strokeStyle = "black";
context.font = cfb;
context.strokeText("Total", thisxpro, thisypro);
thisypro = eval(thisypro + 60);
context.beginPath();
context.strokeStyle="black"; // Black path
context.moveTo(0, eval(thisypro + 30));
context.lineTo(eval(threehundred * 2), eval(thisypro + 30));
context.stroke();
} else if (issuedata.length > 1 && thisypro < thisycon) {
context.beginPath();
context.strokeStyle="black"; // Black path
context.moveTo(0, eval(thisycon + 30));
context.lineTo(eval(threehundred * 2), eval(thisycon + 30));
context.stroke();
context.beginPath();
thisycon = eval(thisycon + 100.0 + (dzero * magnification / 2.0));
thisxcon = eval(threehundred + (dzero * magnification / 2.0));

if (eval(total) < 0) {
context.fillStyle = "red";
} else {
context.fillStyle = "green";
}

if (prototal != 0) { // && contotal != 0) {
thisxcon = eval(thisxcon - eval(prototal / eval(contotal + prototal)) * (dzero * magnification / 2.0));
}

context.arc(thisxcon, thisycon, eval(0.5 * (dzero * magnification)), 0, 2*Math.PI);
context.fill();

thisycon = eval(thisycon + 60);
context.beginPath();
context.strokeStyle = "black";
context.font = cfb;
context.strokeText("Total", thisxcon, thisycon);
thisypro = eval(thisycon + 60);
context.beginPath();
context.strokeStyle="black"; // Black path
context.moveTo(0, eval(thisycon + 30));
context.lineTo(eval(threehundred * 2), eval(thisycon + 30));
context.stroke();
}

document.getElementById('esnap').style.display = 'block';

document.getElementById('mycnt').innerHTML = ofstring;
document.getElementById('rating').value = 0;
document.getElementById('weighting').value = 1;
document.getElementById('issue').value = '';
document.getElementById('issue').focus();
}

</script>
</head>
<body onload="drawt(); document.getElementById('topic').focus(); " ontouchend=" setTimeout(later,2000); ">
<table style="width:100%;">
<tr style="width:100%;"><td style="width:50%;">
<canvas title='Click to define start of your circle diameter then where it is to finish' id="canvaselement" width="600" height="1500" style="position:absolute; top:0; left:0; border: 1px solid yellow; background-color: lightblue;" />
</td><td style="width:20%;">
<h1 id='myh1' align="right">Try Our Pros and Cons <a id='gsc' target=_top title='Another go' href='./prosandcons.html'>Game</a></h1><br>
<h2 id='myh2' align="right"></h2><br>
<br>
<form id='myf' action='#' style='border: 3px solid red; background-color: pink;'>
<br>
<label> Topic: <textarea rows=5 cols=60 name='topic' id='topic' onblur=" topic=this.value.replace(/\n/g,'<br>'); issuedata= ['']; ofstring=' 1'; iof=1; " value=""></textarea></label><br><br><br>
<hr>
<label> Issue<span id='mycnt'> 1</span>: <br> <textarea rows=5 cols=60 name='issue' id='issue' onblur=" document.getElementById('mycnt').innerHTML = ofstring; thisissue=this.value.replace(/,/g, ' ').replace(/\n/g,'<br>'); " value=''></textarea></label><br><br>
<label> Rating -10 to 10 (negative Con,  positive Pro): <br> <input type='number' name='rating' id='rating' value='0'></input></label><br><br>
<label> Weighting for This Issue: <br> <input type='number' name='weighting' id='weighting' value='1'></input></label><br><br>
<div align='center'> <input type='button' name='bact' id='bact' value='Update and Draw to Left' onclick=" andthen(); iof=eval(1 + iof); ofstring=' ' + iof; issuedata.push(thisissue + ',' + eval(document.getElementById('rating').value * document.getElementById('weighting').value)); ourdraw(); "></input>
 <input type='button' name='esnap' id='esnap' value='Email Snapshot' onclick=" iscanvas=1; snapshot(); " style="display:none;"></input>
</div>
<br>
<br>
</form>
</td><td style="width:30%;display:none;">

</td></tr>
</table>

<form style='display:none;' id='myform' name='myform' method='POST' action='./prosandcons.php?mode=1' target='myiframe'><input type='hidden' name='mymobile' id='mymobile' value=''><input type='hidden' name='myfname' id='myfname' value=''><input type='hidden' name='mydurl' id='mydurl' value=''></input><input type='submit' name='submit' id='submit' value='Submit' style='display:none;'></input></form>
<iframe style='display:none;' id='myiframe' src='./prosandcons.php?get='></iframe>
<a style='display:none;' id='myemail' href='mailto:fill.in.email@address?subject=My%20Pros%20and%20Cons&body='>Email</a>
<input style='display:none;' id='mylemail' type='text' value='fill.in.email@address' />

<script language="JavaScript">

elem = document.getElementById('canvaselement');
elemLeft = elem.offsetLeft;
elemTop = elem.offsetTop;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
elem.width = eval(threehundred * 2);
}
context = elem.getContext('2d');

</script>

</body>
</html>