events/demo/canvas3ds.html

<!DOCTYPE HTML>
<title>Canvas</title>
<meta name=viewport content="width=320px">
<style>
  body {
    margin: 0;
  }
  #canvas-bg {
    position: absolute;
  }

    #panel {
      margin: 0;
      border-color: #dedede;
      border-style: solid;
      border-width: 1px 0 0 0;
      border-top: 0;
      padding: 0;
      background: #efefef;
      text-align: left;
    }

  #panel p {
    margin: 0;
    padding: 2px 7px;
    font-size: 16px;
    line-height: 1.0;
  }

  #panel p a{
    text-decoration: none;
  }

  .eraser {
    border: 1px #dedede solid;#dedede
    padding: 0;
    font-size: 12px;
  }

  .eraser img {
    vertical-align: bottom;
  }

  .linewidth {
    display: inline-block;
    text-align: center;
    color: #efefef;
    border: 1px #dedede solid;#dedede
    min-width: 12px;
    max-width: 12px;
    min-height: 12px;
    max-height: 12px;
    padding: 1px;
    overflow: hidden;
  }
    .linewidth span {
      display: inline-block;
      margin: 0;
      padding: 0;
      line-height: 1.0;
      overflow: hidden;
      vertical-align: top;
      font-size: 12px;
    }
    .linewidth-1  span { margin: 5px; border-left: 1px  solid black; height: 1px; width: 1px }
    .linewidth-2  span { margin: 5px; border-left: 2px  solid black; height: 2px; width: 2px }
    .linewidth-3  span { margin: 4px; border-left: 3px  solid black; height: 3px; width: 3px }
    .linewidth-4  span { margin: 4px; border-left: 4px  solid black; height: 4px; width: 4px }
    .linewidth-8  span { margin: 3px; border-left: 8px  solid black; height: 8px; width: 8px }
</style>

<canvas width=320 height=200 id=canvas-bg></canvas>
<canvas width=320 height=200 id=canvas></canvas>

<div id="panel">
        <p class="color">
        <a href="javascript:setProp('fillStyle', '#FFFFFF')" style="color: #FFFFFF">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#DCDDDD')" style="color: #DCDDDD">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#9ea1a3')" style="color: #9ea1a3">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#2B2B2B')" style="color: #2B2B2B">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#D9333F')" style="color: #D9333F">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#762f07')" style="color: #762f07">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#F5B199')" style="color: #F5B199">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#FFDB4F')" style="color: #FFDB4F">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#7EBEAB')" style="color: #7EBEAB">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#2F5D50')" style="color: #2F5D50">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#89C3EB')" style="color: #89C3EB">&#9632;</a>
        <a href="javascript:setProp('fillStyle', '#706CAA')" style="color: #706CAA">&#9632;</a>

    <a href="javascript:void(0)" onclick="inputCustomColor(this)" style="color: black">&#9632;</a>
    <a href="javascript:eraser()" class=eraser><img src="http://f.hatena.ne.jp/images/fotolife/h/hatenahaiku/20080710/20080710114446.gif" width=16 height=16 alt=Eraser></a>
      </p>

  <p class="width">
    <a href="javascript:setPixelSize(1)" class="linewidth linewidth-1"><span>1</span></a>
    <a href="javascript:setPixelSize(2)" class="linewidth linewidth-2"><span>2</span></a>
    <a href="javascript:setPixelSize(3)" class="linewidth linewidth-3"><span>3</span></a>
    <a href="javascript:setPixelSize(4)" class="linewidth linewidth-4"><span>4</span></a>
    <a href="javascript:setPixelSize(8)" class="linewidth linewidth-8"><span>8</span></a>
        </p>
</div>

<script>
  var canvas = document.getElementById ('canvas');
  var canvasGrid = document.getElementById ('canvas-bg');
  var ctx = canvas.getContext ('2d');
  var ctxGrid = canvasGrid.getContext ('2d');

  var width = canvas.width;
  var height = canvas.height;
  var pixel = 8;

  ctxGrid.fillStyle = '#eee';
  for (var i = 0; i < width / pixel; i++) {
    ctxGrid.fillRect (i * pixel, 0, 1, height);
  }
  for (var i = 0; i < height / pixel; i++) {
    ctxGrid.fillRect (0, i * pixel, width, 1);
  }

  ctx.fillStyle = 'black';
  var eraserMode = false;
  canvasGrid.addEventListener ('click', function (ev) {
    var x = ev.offsetX - (ev.offsetX % pixel);
    var y = ev.offsetY - (ev.offsetY % pixel);
    ctx[eraserMode ? 'clearRect' : 'fillRect'] (x, y, pixel, pixel);
  }, false);

  function eraser () {
    eraserMode = true;
  }

  function setProp (n, v) {
    ctx[n] = v;
    eraserMode = false;
  }

  function inputCustomColor(button) {
    var color = prompt('Specify color', button.style.color);
    if (color) {
        setProp('fillStyle', color);
        button.style.color = color;
    }
  }

  function setPixelSize (size) {
    pixel = size;
  }
</script>
<!--

Copyright 2011 Wakaba <w@suika.fam.cx>.

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

-->
1	wakaba	1.1	<!DOCTYPE HTML>
2			<title>Canvas</title>
3			<meta name=viewport content="width=320px">
4			<style>
5			body {
6			margin: 0;
7			}
8			#canvas-bg {
9			position: absolute;
10			}
11
12			#panel {
13			margin: 0;
14			border-color: #dedede;
15			border-style: solid;
16			border-width: 1px 0 0 0;
17			border-top: 0;
18			padding: 0;
19			background: #efefef;
20			text-align: left;
21			}
22
23			#panel p {
24			margin: 0;
25			padding: 2px 7px;
26			font-size: 16px;
27			line-height: 1.0;
28			}
29
30			#panel p a{
31			text-decoration: none;
32			}
33
34			.eraser {
35			border: 1px #dedede solid;#dedede
36			padding: 0;
37			font-size: 12px;
38			}
39
40			.eraser img {
41			vertical-align: bottom;
42			}
43
44			.linewidth {
45			display: inline-block;
46			text-align: center;
47			color: #efefef;
48			border: 1px #dedede solid;#dedede
49			min-width: 12px;
50			max-width: 12px;
51			min-height: 12px;
52			max-height: 12px;
53			padding: 1px;
54			overflow: hidden;
55			}
56			.linewidth span {
57			display: inline-block;
58			margin: 0;
59			padding: 0;
60			line-height: 1.0;
61			overflow: hidden;
62			vertical-align: top;
63			font-size: 12px;
64			}
65			.linewidth-1 span { margin: 5px; border-left: 1px solid black; height: 1px; width: 1px }
66			.linewidth-2 span { margin: 5px; border-left: 2px solid black; height: 2px; width: 2px }
67			.linewidth-3 span { margin: 4px; border-left: 3px solid black; height: 3px; width: 3px }
68			.linewidth-4 span { margin: 4px; border-left: 4px solid black; height: 4px; width: 4px }
69			.linewidth-8 span { margin: 3px; border-left: 8px solid black; height: 8px; width: 8px }
70			</style>
71
72			<canvas width=320 height=200 id=canvas-bg></canvas>
73			<canvas width=320 height=200 id=canvas></canvas>
74
75			<div id="panel">
76			<p class="color">
77			<a href="javascript:setProp('fillStyle', '#FFFFFF')" style="color: #FFFFFF">■</a>
78			<a href="javascript:setProp('fillStyle', '#DCDDDD')" style="color: #DCDDDD">■</a>
79			<a href="javascript:setProp('fillStyle', '#9ea1a3')" style="color: #9ea1a3">■</a>
80			<a href="javascript:setProp('fillStyle', '#2B2B2B')" style="color: #2B2B2B">■</a>
81			<a href="javascript:setProp('fillStyle', '#D9333F')" style="color: #D9333F">■</a>
82			<a href="javascript:setProp('fillStyle', '#762f07')" style="color: #762f07">■</a>
83			<a href="javascript:setProp('fillStyle', '#F5B199')" style="color: #F5B199">■</a>
84			<a href="javascript:setProp('fillStyle', '#FFDB4F')" style="color: #FFDB4F">■</a>
85			<a href="javascript:setProp('fillStyle', '#7EBEAB')" style="color: #7EBEAB">■</a>
86			<a href="javascript:setProp('fillStyle', '#2F5D50')" style="color: #2F5D50">■</a>
87			<a href="javascript:setProp('fillStyle', '#89C3EB')" style="color: #89C3EB">■</a>
88			<a href="javascript:setProp('fillStyle', '#706CAA')" style="color: #706CAA">■</a>
89
90			<a href="javascript:void(0)" onclick="inputCustomColor(this)" style="color: black">■</a>
91			<a href="javascript:eraser()" class=eraser><img src="http://f.hatena.ne.jp/images/fotolife/h/hatenahaiku/20080710/20080710114446.gif" width=16 height=16 alt=Eraser></a>
92			</p>
93
94			<p class="width">
95			<a href="javascript:setPixelSize(1)" class="linewidth linewidth-1"><span>1</span></a>
96			<a href="javascript:setPixelSize(2)" class="linewidth linewidth-2"><span>2</span></a>
97			<a href="javascript:setPixelSize(3)" class="linewidth linewidth-3"><span>3</span></a>
98			<a href="javascript:setPixelSize(4)" class="linewidth linewidth-4"><span>4</span></a>
99			<a href="javascript:setPixelSize(8)" class="linewidth linewidth-8"><span>8</span></a>
100			</p>
101			</div>
102
103			<script>
104			var canvas = document.getElementById ('canvas');
105			var canvasGrid = document.getElementById ('canvas-bg');
106			var ctx = canvas.getContext ('2d');
107			var ctxGrid = canvasGrid.getContext ('2d');
108
109			var width = canvas.width;
110			var height = canvas.height;
111			var pixel = 8;
112
113			ctxGrid.fillStyle = '#eee';
114			for (var i = 0; i < width / pixel; i++) {
115			ctxGrid.fillRect (i * pixel, 0, 1, height);
116			}
117			for (var i = 0; i < height / pixel; i++) {
118			ctxGrid.fillRect (0, i * pixel, width, 1);
119			}
120
121			ctx.fillStyle = 'black';
122			var eraserMode = false;
123			canvasGrid.addEventListener ('click', function (ev) {
124			var x = ev.offsetX - (ev.offsetX % pixel);
125			var y = ev.offsetY - (ev.offsetY % pixel);
126			ctx[eraserMode ? 'clearRect' : 'fillRect'] (x, y, pixel, pixel);
127			}, false);
128
129			function eraser () {
130			eraserMode = true;
131			}
132
133			function setProp (n, v) {
134			ctx[n] = v;
135			eraserMode = false;
136			}
137
138			function inputCustomColor(button) {
139			var color = prompt('Specify color', button.style.color);
140			if (color) {
141			setProp('fillStyle', color);
142			button.style.color = color;
143			}
144			}
145
146			function setPixelSize (size) {
147			pixel = size;
148			}
149			</script>
150			<!--
151
152			Copyright 2011 Wakaba <w@suika.fam.cx>.
153
154			Permission is hereby granted, free of charge, to any person obtaining
155			a copy of this software and associated documentation files (the
156			"Software"), to deal in the Software without restriction, including
157			without limitation the rights to use, copy, modify, merge, publish,
158			distribute, sublicense, and/or sell copies of the Software, and to
159			permit persons to whom the Software is furnished to do so, subject to
160			the following conditions:
161
162			The above copyright notice and this permission notice shall be
163			included in all copies or substantial portions of the Software.
164
165			THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
166			EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
167			MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
168			NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
169			LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
170			OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
171			WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
172
173			-->