canvas/cis/cis.en.html

<!DOCTYPE HTML>
<html lang=en>
<title>Canvas</title>
<link rel=stylesheet href="/www/style/html/xhtml">
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<style>
p {
  text-indent: 0 !important;
}
canvas {
  border: 10px blue solid;
}
#statements-para {
  white-space: pre;
  white-space: pre-wrap;
}
input[type=text] {
  width: 90%;
}
</style>

<h1>Canvas</h1>

<form onsubmit=" execute (s.value); return false ">
<p id=prompt-para>
<input name=s type=text><input type=submit value=OK>

<p id=log-para>
</form>

<div id=canvas-para>
<canvas></canvas>
</div>

<p id=statements-para></p>

<script>
  function execute (s) {
    if (/^\s*$/.test (s)) {
      //
    } else if (/^\s*clear\s*(?:;\s*)?$/.test (s)) {
      document.forms[0].s.value = '';
      clearCanvas ();
      clearStatments ();
    } else {
      var canvas = document.getElementsByTagName ('canvas')[0];
      var ctx = canvas.getContext ('2d');
      try {
        eval (s);
        addStatement (s);
        document.forms[0].s.value = '';
        setLog ('');
      } catch (e) {
        setLog (e.message || e);
      }
    }
  } // execute

  function setLog (s) {
    var lp = document.getElementById ('log-para');
    lp.innerHTML = 'aa';
    lp.firstChild.data = s;
  } // setLog

  function clearStatements () {
    var sp = document.getElementById ('statements-para');
    sp.innerHTML = 'aa';
    sp.firstChild.data = "var canvas = document.getElementsByTagName ('canvas')[0];\nvar ctx = canvas.getContext ('2d');\n";
  } // clearStatements

  function addStatement (s) {
    if (!/;\s*$/.test (s)) {
      s += ';';
    }
    document.getElementById ('statements-para').innerHTML += s + '\n';
  } // addStatement

  function clearCanvas () {
    document.getElementsByTagName ('canvas')[0].width
        = document.getElementsByTagName ('canvas')[0].width;
  }

  clearStatements ();
</script>
1	wakaba	1.1	<!DOCTYPE HTML>
2			<html lang=en>
3			<title>Canvas</title>
4			<link rel=stylesheet href="/www/style/html/xhtml">
5			<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
6			<style>
7			p {
8			text-indent: 0 !important;
9			}
10			canvas {
11			border: 10px blue solid;
12			}
13			#statements-para {
14			white-space: pre;
15			white-space: pre-wrap;
16			}
17			input[type=text] {
18			width: 90%;
19			}
20			</style>
21
22			<h1>Canvas</h1>
23
24			<form onsubmit=" execute (s.value); return false ">
25			<p id=prompt-para>
26			<input name=s type=text><input type=submit value=OK>
27
28			<p id=log-para>
29			</form>
30
31			<div id=canvas-para>
32			<canvas></canvas>
33			</div>
34
35			<p id=statements-para></p>
36
37			<script>
38			function execute (s) {
39			if (/^\s*$/.test (s)) {
40			//
41			} else if (/^\sclear\s(?:;\s*)?$/.test (s)) {
42			document.forms[0].s.value = '';
43			clearCanvas ();
44			clearStatments ();
45			} else {
46			var canvas = document.getElementsByTagName ('canvas')[0];
47			var ctx = canvas.getContext ('2d');
48			try {
49			eval (s);
50			addStatement (s);
51			document.forms[0].s.value = '';
52			setLog ('');
53			} catch (e) {
54			setLog (e.message \|\| e);
55			}
56			}
57			} // execute
58
59			function setLog (s) {
60			var lp = document.getElementById ('log-para');
61			lp.innerHTML = 'aa';
62			lp.firstChild.data = s;
63			} // setLog
64
65			function clearStatements () {
66			var sp = document.getElementById ('statements-para');
67			sp.innerHTML = 'aa';
68			sp.firstChild.data = "var canvas = document.getElementsByTagName ('canvas')[0];\nvar ctx = canvas.getContext ('2d');\n";
69			} // clearStatements
70
71			function addStatement (s) {
72			if (!/;\s*$/.test (s)) {
73			s += ';';
74			}
75			document.getElementById ('statements-para').innerHTML += s + '\n';
76			} // addStatement
77
78			function clearCanvas () {
79			document.getElementsByTagName ('canvas')[0].width
80			= document.getElementsByTagName ('canvas')[0].width;
81			}
82
83			clearStatements ();
84			</script>