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	<!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>