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 ('mousemove', function (ev) {
    // Firefox does not have |offsetX| but WebKit does.
    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	wakaba	1.3	canvasGrid.addEventListener ('mousemove', function (ev) {
124	wakaba	1.2	// Firefox does not have \|offsetX\| but WebKit does.
125	wakaba	1.1	var x = ev.offsetX - (ev.offsetX % pixel);
126			var y = ev.offsetY - (ev.offsetY % pixel);
127			ctx[eraserMode ? 'clearRect' : 'fillRect'] (x, y, pixel, pixel);
128			}, false);
129
130			function eraser () {
131			eraserMode = true;
132			}
133
134			function setProp (n, v) {
135			ctx[n] = v;
136			eraserMode = false;
137			}
138
139			function inputCustomColor(button) {
140			var color = prompt('Specify color', button.style.color);
141			if (color) {
142			setProp('fillStyle', color);
143			button.style.color = color;
144			}
145			}
146
147			function setPixelSize (size) {
148			pixel = size;
149			}
150			</script>
151			<!--
152
153			Copyright 2011 Wakaba <w@suika.fam.cx>.
154
155			Permission is hereby granted, free of charge, to any person obtaining
156			a copy of this software and associated documentation files (the
157			"Software"), to deal in the Software without restriction, including
158			without limitation the rights to use, copy, modify, merge, publish,
159			distribute, sublicense, and/or sell copies of the Software, and to
160			permit persons to whom the Software is furnished to do so, subject to
161			the following conditions:
162
163			The above copyright notice and this permission notice shall be
164			included in all copies or substantial portions of the Software.
165
166			THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
167			EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
168			MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
169			NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
170			LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
171			OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
172			WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
173
174			-->