swe/pages/canvas.html

<!DOCTYPE HTML>
<html lang=en>
<title>Canvas</title>
<meta name="viewport" content="width=device-width">
<style>
body {
  margin: 0;
  padding: 0;
  background: #C0C0C0;
}
canvas {
  width: 240px;
  background: white;
}

a {
  display: inline-block;
  min-width: 1em;
  text-align: center;
}
menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 8px;
}

[hidden] {
  display: none;
}
#panel {
  position: absolute;
  left: 20px;
  width: 200px; /* 240px - 20px * 2 */
  top: 20px;
  max-height: 120px; /* 160px - 20px * 2 */
  overflow: auto;
  background-color: #C0C0C0;
  font-size: smaller;
}
#panel p {
  margin: 0;
  padding: 0;
}
</style>

<body>

<canvas width=240 height=160></canvas>

<section id=panel hidden>

<p>
[<a href="javascript:setProp ('lineWidth', 1); togglePanel ()">1</a>
<a href="javascript:setProp ('lineWidth', 2); togglePanel ()">2</a>
<a href="javascript:setProp ('lineWidth', 3); togglePanel ()">3</a>
<a href="javascript:setProp ('lineWidth', 5); togglePanel ()">5</a>
<a href="javascript:setProp ('lineWidth', 10); togglePanel ()">10</a>]
</p>

<p>
[<a href="javascript:setProp ('strokeStyle', 'black'); togglePanel ()" style="color: black">black</a>
<a href="javascript:setProp ('strokeStyle', 'red'); togglePanel ()" style="color: red">red</a>
<a href="javascript:setProp ('strokeStyle', 'green'); togglePanel ()" style="color: green">green</a>
<a href="javascript:setProp ('strokeStyle', 'blue'); togglePanel ()" style="color: blue">blue</a>
<a href="javascript:setProp ('strokeStyle', 'orange'); togglePanel ()" style="color: orange">orange</a>
<a href="javascript:setProp ('strokeStyle', 'yellow'); togglePanel ()" style="color: yellow">yellow</a>
<a href="javascript:setProp ('strokeStyle', 'pink'); togglePanel ()" style="color: pink">pink</a>
<a href="javascript:setProp ('strokeStyle', 'purple'); togglePanel ()" style="color: purple">purple</a>
<a href="javascript:setProp ('strokeStyle', 'gray'); togglePanel ()" style="color: gray">gray</a>
<a href="javascript:setProp ('strokeStyle', 'white'); togglePanel ()" style="color: white">white</a>]
</p>

<hr>

<a id=show-image-page>Show image page</a>

</section>

<menu><a href="javascript:togglePanel ()">Panel</a>
<a href="javascript:saveImage ()">Save</a>
<span id=status></span></menu>

<script>
  function $ (id) { return document.getElementById (id) }
  
  function setStatus (s) {
    var status = $ ('status');
    status.innerText = s;
    status.textContent = s;
  } // setStatus

  var canvas = document.getElementsByTagName('canvas')[0];
  var ctx = canvas.getContext('2d');
  ctx.lineCap = 'round';
  ctx.lineWidth = 3;
  ctx.beginPath ();

  var q = (location.search || '').replace (/^\?/, '').split (/[&;]/);
  var param = {};
  for (var i = 0; i < q.length; i++) {
    var p = q[i].split (/=/);
    param[decodeURIComponent (p[0])] = decodeURIComponent (p[1]);
  }

  var drawing = false;
  canvas.onmousedown = function (ev) {
    drawing = true;
    ctx.beginPath ();
    var x = ev.clientX;
    var y = ev.clientY;
    ctx.moveTo (x, y);
    write ('moveTo', x, y);
  };
  canvas.onmousemove = function (ev) {
    if (drawing) {
      var x = ev.clientX;
      var y = ev.clientY;
      ctx.lineTo (x, y);
      write ('lineTo', x, y);
      ctx.stroke ();
//        ctx.closePath ();
//        ctx.beginPath ();
//        ctx.moveTo (x, y);
    }
  };
  window.onmouseup = function (ev) {
    if (!drawing) return;
    ctx.stroke ();
    ctx.closePath ();
    drawing = false;
  };

  var newEvents = [];

  if (param['input-url']) {
    newEvents = readRemoteImage (param['input-url']);
  } else {
    write ('lineCap', 'round');
    write ('lineWidth', 3);
  }

  function write () {
    setStatus ('Modified');
    newEvents.push (Array.prototype.join.call (arguments, ','));
  }

  function setProp (n, v) {
    ctx[n] = v;
    write (n, v);
  }
    
  function saveImage () {
    setStatus ('Saving...');
    var xhr = new XMLHttpRequest ();
    xhr.open ('POST', param['post-url'], true);
    xhr.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
    var e = function (n, v) {
      return encodeURIComponent (n) + '=' + encodeURIComponent (v);
    };
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status < 400) {
          setStatus ('Saved');
        } else {
          setStatus ('Failed (' + xhr.status + ')');
        }
        var location = xhr.getResponseHeader ('Location');
        if (location) {
          $('show-image-page').href = location;
        }
        var postURL = xhr.getResponseHeader ('X-SW-Post-URL');
        if (postURL) {
          param['post-url'] = postURL;
        }
        param.hash = xhr.getResponseHeader ('X-SW-Hash');
        xhr.onreadystate = null;
      }
    };
    xhr.send ([
      e('text', newEvents.join ("\n")),
      e('content-type', 'image/x-canvas-instructions+text'),
      e('hash', param.hash),
      e('names', param.names || '(image)'),
      e('no-redirect', 1)
    ].join ('&'));
  }

  function readRemoteImage (u) {
    var xhr = new XMLHttpRequest ();
    xhr.open ('GET', u, false);
    xhr.setRequestHeader ('Cache-Control', 'no-cache');
    xhr.send (null);
    if (xhr.responseText) {
      var events = xhr.responseText.split (/\x0A/);
      if (events.length) {
        canvas.width = canvas.width; // clear
        processEvents(events);
      }
      var hash = xhr.getResponseHeader ('X-SW-Hash');
      if (hash) {
        param.hash = hash;
      }
      return events;
    }
    return [];
  }

    function processEvents (events) {
      for (var i = 0; i < events.length; i++) {
        var ev = events[i].split (/,/);
        if (ev[0] == 'lineTo') {
          var x = parseFloat (ev[1]);
          var y = parseFloat (ev[2]);
          ctx.lineTo (x, y);
          ctx.stroke ();
//          ctx.closePath ();
//          ctx.beginPath ();
//          ctx.moveTo (x, y);
        } else if (ev[0] == 'moveTo') {
          var x = parseFloat (ev[1]);
          var y = parseFloat (ev[2]);
          ctx.moveTo (x, y);
        } else if (ev[0] == 'strokeStyle' || ev[0] == 'lineWidth') {
          ctx.closePath ();
          ctx.beginPath ();
          ctx[ev[0]] = ev[1];
        }
      }
    }

    function togglePanel () {
      if ($('panel').hasAttribute ('hidden')) {
        $('panel').removeAttribute ('hidden');
      } else {
        $('panel').setAttribute ('hidden', '');
      }
    }

</script>
1	<!DOCTYPE HTML>
2	<html lang=en>
3	<title>Canvas</title>
4	<meta name="viewport" content="width=device-width">
5	<style>
6	body {
7	margin: 0;
8	padding: 0;
9	background: #C0C0C0;
10	}
11	canvas {
12	width: 240px;
13	background: white;
14	}
15
16	a {
17	display: inline-block;
18	min-width: 1em;
19	text-align: center;
20	}
21	menu {
22	position: fixed;
23	bottom: 0;
24	width: 100%;
25	margin: 0;
26	padding: 0;
27	font-size: 8px;
28	}
29
30	[hidden] {
31	display: none;
32	}
33	#panel {
34	position: absolute;
35	left: 20px;
36	width: 200px; /* 240px - 20px * 2 */
37	top: 20px;
38	max-height: 120px; /* 160px - 20px * 2 */
39	overflow: auto;
40	background-color: #C0C0C0;
41	font-size: smaller;
42	}
43	#panel p {
44	margin: 0;
45	padding: 0;
46	}
47	</style>
48
49	<body>
50
51	<canvas width=240 height=160></canvas>
52
53	<section id=panel hidden>
54
55	<p>
56	[<a href="javascript:setProp ('lineWidth', 1); togglePanel ()">1</a>
57	<a href="javascript:setProp ('lineWidth', 2); togglePanel ()">2</a>
58	<a href="javascript:setProp ('lineWidth', 3); togglePanel ()">3</a>
59	<a href="javascript:setProp ('lineWidth', 5); togglePanel ()">5</a>
60	<a href="javascript:setProp ('lineWidth', 10); togglePanel ()">10</a>]
61	</p>
62
63	<p>
64	[<a href="javascript:setProp ('strokeStyle', 'black'); togglePanel ()" style="color: black">black</a>
65	<a href="javascript:setProp ('strokeStyle', 'red'); togglePanel ()" style="color: red">red</a>
66	<a href="javascript:setProp ('strokeStyle', 'green'); togglePanel ()" style="color: green">green</a>
67	<a href="javascript:setProp ('strokeStyle', 'blue'); togglePanel ()" style="color: blue">blue</a>
68	<a href="javascript:setProp ('strokeStyle', 'orange'); togglePanel ()" style="color: orange">orange</a>
69	<a href="javascript:setProp ('strokeStyle', 'yellow'); togglePanel ()" style="color: yellow">yellow</a>
70	<a href="javascript:setProp ('strokeStyle', 'pink'); togglePanel ()" style="color: pink">pink</a>
71	<a href="javascript:setProp ('strokeStyle', 'purple'); togglePanel ()" style="color: purple">purple</a>
72	<a href="javascript:setProp ('strokeStyle', 'gray'); togglePanel ()" style="color: gray">gray</a>
73	<a href="javascript:setProp ('strokeStyle', 'white'); togglePanel ()" style="color: white">white</a>]
74	</p>
75
76	<hr>
77
78	<a id=show-image-page>Show image page</a>
79
80	</section>
81
82	<menu><a href="javascript:togglePanel ()">Panel</a>
83	<a href="javascript:saveImage ()">Save</a>
84	<span id=status></span></menu>
85
86	<script>
87	function $ (id) { return document.getElementById (id) }
88
89	function setStatus (s) {
90	var status = $ ('status');
91	status.innerText = s;
92	status.textContent = s;
93	} // setStatus
94
95	var canvas = document.getElementsByTagName('canvas')[0];
96	var ctx = canvas.getContext('2d');
97	ctx.lineCap = 'round';
98	ctx.lineWidth = 3;
99	ctx.beginPath ();
100
101	var q = (location.search \|\| '').replace (/^\?/, '').split (/[&;]/);
102	var param = {};
103	for (var i = 0; i < q.length; i++) {
104	var p = q[i].split (/=/);
105	param[decodeURIComponent (p[0])] = decodeURIComponent (p[1]);
106	}
107
108	var drawing = false;
109	canvas.onmousedown = function (ev) {
110	drawing = true;
111	ctx.beginPath ();
112	var x = ev.clientX;
113	var y = ev.clientY;
114	ctx.moveTo (x, y);
115	write ('moveTo', x, y);
116	};
117	canvas.onmousemove = function (ev) {
118	if (drawing) {
119	var x = ev.clientX;
120	var y = ev.clientY;
121	ctx.lineTo (x, y);
122	write ('lineTo', x, y);
123	ctx.stroke ();
124	// ctx.closePath ();
125	// ctx.beginPath ();
126	// ctx.moveTo (x, y);
127	}
128	};
129	window.onmouseup = function (ev) {
130	if (!drawing) return;
131	ctx.stroke ();
132	ctx.closePath ();
133	drawing = false;
134	};
135
136	var newEvents = [];
137
138	if (param['input-url']) {
139	newEvents = readRemoteImage (param['input-url']);
140	} else {
141	write ('lineCap', 'round');
142	write ('lineWidth', 3);
143	}
144
145	function write () {
146	setStatus ('Modified');
147	newEvents.push (Array.prototype.join.call (arguments, ','));
148	}
149
150	function setProp (n, v) {
151	ctx[n] = v;
152	write (n, v);
153	}
154
155	function saveImage () {
156	setStatus ('Saving...');
157	var xhr = new XMLHttpRequest ();
158	xhr.open ('POST', param['post-url'], true);
159	xhr.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
160	var e = function (n, v) {
161	return encodeURIComponent (n) + '=' + encodeURIComponent (v);
162	};
163	xhr.onreadystatechange = function () {
164	if (xhr.readyState == 4) {
165	if (xhr.status >= 200 && xhr.status < 400) {
166	setStatus ('Saved');
167	} else {
168	setStatus ('Failed (' + xhr.status + ')');
169	}
170	var location = xhr.getResponseHeader ('Location');
171	if (location) {
172	$('show-image-page').href = location;
173	}
174	var postURL = xhr.getResponseHeader ('X-SW-Post-URL');
175	if (postURL) {
176	param['post-url'] = postURL;
177	}
178	param.hash = xhr.getResponseHeader ('X-SW-Hash');
179	xhr.onreadystate = null;
180	}
181	};
182	xhr.send ([
183	e('text', newEvents.join ("\n")),
184	e('content-type', 'image/x-canvas-instructions+text'),
185	e('hash', param.hash),
186	e('names', param.names \|\| '(image)'),
187	e('no-redirect', 1)
188	].join ('&'));
189	}
190
191	function readRemoteImage (u) {
192	var xhr = new XMLHttpRequest ();
193	xhr.open ('GET', u, false);
194	xhr.setRequestHeader ('Cache-Control', 'no-cache');
195	xhr.send (null);
196	if (xhr.responseText) {
197	var events = xhr.responseText.split (/\x0A/);
198	if (events.length) {
199	canvas.width = canvas.width; // clear
200	processEvents(events);
201	}
202	var hash = xhr.getResponseHeader ('X-SW-Hash');
203	if (hash) {
204	param.hash = hash;
205	}
206	return events;
207	}
208	return [];
209	}
210
211	function processEvents (events) {
212	for (var i = 0; i < events.length; i++) {
213	var ev = events[i].split (/,/);
214	if (ev[0] == 'lineTo') {
215	var x = parseFloat (ev[1]);
216	var y = parseFloat (ev[2]);
217	ctx.lineTo (x, y);
218	ctx.stroke ();
219	// ctx.closePath ();
220	// ctx.beginPath ();
221	// ctx.moveTo (x, y);
222	} else if (ev[0] == 'moveTo') {
223	var x = parseFloat (ev[1]);
224	var y = parseFloat (ev[2]);
225	ctx.moveTo (x, y);
226	} else if (ev[0] == 'strokeStyle' \|\| ev[0] == 'lineWidth') {
227	ctx.closePath ();
228	ctx.beginPath ();
229	ctx[ev[0]] = ev[1];
230	}
231	}
232	}
233
234	function togglePanel () {
235	if ($('panel').hasAttribute ('hidden')) {
236	$('panel').removeAttribute ('hidden');
237	} else {
238	$('panel').setAttribute ('hidden', '');
239	}
240	}
241
242	</script>