canvas/cis/cis.en.html

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