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	<!DOCTYPE HTML>
2	<html lang=en>
3	<title>Canvas</title>
4	<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	<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