-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
347 lines (316 loc) · 20.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Tools</title>
<script src="assets/javascripts/libs/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="assets/javascripts/drawHandler.js" type="text/javascript"></script>
<script src="assets/javascripts/Rectangle.js" type="text/javascript"></script>
<script src="assets/javascripts/Line.js" type="text/javascript"></script>
<script src="assets/javascripts/Point.js" type="text/javascript"></script>
<script src="assets/javascripts/Square.js" type="text/javascript"></script>
<script src="assets/javascripts/Vector.js" type="text/javascript"></script>
<script src="assets/javascripts/Polygon.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/stylesheets/index.css"/>
</head>
<body>
<canvas id="rectangle" width="160" height="160">Canvas not supported!</canvas>
<canvas id="square" width="160" height="160"></canvas>
<canvas id="triangle" width="160" height="160"></canvas>
<canvas id="arrow" width="160" height="160"></canvas>
<canvas id="cube" width="160" height="160"></canvas>
<canvas id="linearGradient" width="160" height="160"></canvas>
<canvas id="radialGradient" width="160" height="160"></canvas>
<canvas id="ringOfSquares" width="160" height="160"></canvas>
<canvas id="materiaGrid" width="160" height="160"></canvas>
<canvas id="redColorPalette" width="256" height="256"></canvas>
<canvas id="greenColorPalette" width="256" height="256"></canvas>
<canvas id="blueColorPalette" width="256" height="256"></canvas>
<canvas id="mouseTracker" width="256" height="256"></canvas>
<canvas id="collisionDetection" width="256" height="256"></canvas>
<canvas id="keyboardControl" width="256" height="256"></canvas>
<!-- <table id="state">-->
<!-- <tr title="state">-->
<!-- <th>interface mixin CanvasState</th>-->
<!-- </tr>-->
<!-- <tr title="void save(); //push state on state stack">-->
<!-- <td>save</td>-->
<!-- </tr>-->
<!-- <tr title="void restore(); //pop state stack and restore state">-->
<!-- <td>restore</td>-->
<!-- </tr>-->
<!-- </table>-->
<!-- <table id="transformations">-->
<!-- <tr title="transformations (default transform is the identity matrix)">-->
<!-- <th colspan="1000">interface mixin CanvasTransform</th>-->
<!-- </tr>-->
<!-- <tr title="void scale(unrestricted double x, unrestricted double y);">-->
<!-- <td id="scale">scale</td>-->
<!-- <td title="unrestricted double x">-->
<!-- <label for="scaleX">x</label>-->
<!-- <input id="scaleX" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double y">-->
<!-- <label for="scaleY">y</label>-->
<!-- <input id="scaleY" type="number"/>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td title="void rotate(unrestricted double angle);">rotate</td>-->
<!-- <td title="unrestricted double angle">-->
<!-- <label for="rotateAngle">∠</label>-->
<!-- <input placeholder="angle" id="rotateAngle" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double angle">-->
<!-- <label for="rotateAngleType">°/C</label>-->
<!-- <select id="rotateAngleType">-->
<!-- <option value="deg">degrees</option>-->
<!-- <option value="rad">radians</option>-->
<!-- </select>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr title="void translate(unrestricted double x, unrestricted double y);">-->
<!-- <td>translate</td>-->
<!-- <td title="unrestricted double x">-->
<!-- <label for="translateX">x</label>-->
<!-- <input id="translateX" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double y">-->
<!-- <label for="translateY">y</label>-->
<!-- <input id="translateY" type="number"/>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr title="void transform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);">-->
<!-- <td>transform</td>-->
<!-- <td title="unrestricted double a || m11">-->
<!-- <label for="transformA">a</label>-->
<!-- <input id="transformA" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double b || m12 || m21">-->
<!-- <label for="transformB">b</label>-->
<!-- <input id="transformB" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double c || m21 || m12">-->
<!-- <label for="transformC">c</label>-->
<!-- <input id="transformC" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double d || m22">-->
<!-- <label for="transformD">d</label>-->
<!-- <input id="transformD" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double e || dx">-->
<!-- <label for="transformE">e</label>-->
<!-- <input id="transformE" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double f || dy">-->
<!-- <label for="transformF">f</label>-->
<!-- <input id="transformF" type="number"/>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr title="[NewObject] DOMMatrix getTransform();">-->
<!-- <td>getTransform</td>-->
<!-- </tr>-->
<!-- <tr title="void setTransform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);">-->
<!-- <td>setTransform</td>-->
<!-- <td title="unrestricted double a || m11">-->
<!-- <label for="setTransformA">a</label>-->
<!-- <input id="setTransformA" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double b || m12 || m21">-->
<!-- <label for="setTransformB">b</label>-->
<!-- <input id="setTransformB" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double c || m21 || m12">-->
<!-- <label for="setTransformC">c</label>-->
<!-- <input id="setTransformC" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double d || m22">-->
<!-- <label for="setTransformD">d</label>-->
<!-- <input id="setTransformD" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double e || dx">-->
<!-- <label for="setTransformE">e</label>-->
<!-- <input id="setTransformE" type="number"/>-->
<!-- </td>-->
<!-- <td title="unrestricted double f || dy">-->
<!-- <label for="setTransformF">f</label>-->
<!-- <input id="setTransformF" type="number"/>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr title="void setTransform(optional DOMMatrix2DInit transform = {});">-->
<!-- <td>setTransform</td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td title="void resetTransform();">resetTransform</td>-->
<!-- </tr>-->
<!-- </table>-->
<!-- <table>-->
<!-- <tr>-->
<!-- <th colspan="1000" title="compositing">interface mixin CanvasCompositing</th>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td title="attribute unrestricted double globalAlpha; // (default 1.0)">scale</td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td title="attribute DOMString globalCompositeOperation; // (default source-over)">scale</td>-->
<!-- </tr>-->
<!-- </table>-->
<!-- interface mixin CanvasFillStrokeStyles {-->
<!-- // colors and styles (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)-->
<!-- CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);-->
<!-- CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);-->
<!-- CanvasPattern? createPattern(CanvasImageSource image, [TreatNullAs=EmptyString] DOMString repetition);-->
<!-- };-->
<!-- interface mixin CanvasShadowStyles {-->
<!-- // shadows-->
<!-- attribute unrestricted double shadowOffsetX; // (default 0)-->
<!-- attribute unrestricted double shadowOffsetY; // (default 0)-->
<!-- attribute unrestricted double shadowBlur; // (default 0)-->
<!-- attribute DOMString shadowColor; // (default transparent black)-->
<!-- };-->
<!-- interface mixin CanvasFilters {-->
<!-- // filters-->
<!-- attribute DOMString filter; // (default "none")-->
<!-- };-->
<!-- interface mixin CanvasRect {-->
<!-- // rects-->
<!-- void clearRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);-->
<!-- void fillRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);-->
<!-- void strokeRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);-->
<!-- };-->
<!-- interface mixin CanvasDrawPath {-->
<!-- // path API (see also CanvasPath)-->
<!-- void beginPath();-->
<!-- void fill(optional CanvasFillRule fillRule = "nonzero");-->
<!-- void fill(Path2D path, optional CanvasFillRule fillRule = "nonzero");-->
<!-- void stroke();-->
<!-- void stroke(Path2D path);-->
<!-- void clip(optional CanvasFillRule fillRule = "nonzero");-->
<!-- void clip(Path2D path, optional CanvasFillRule fillRule = "nonzero");-->
<!-- boolean isPointInPath(unrestricted double x, unrestricted double y, optional CanvasFillRule fillRule =-->
<!-- "nonzero");-->
<!-- boolean isPointInPath(Path2D path, unrestricted double x, unrestricted double y, optional CanvasFillRule-->
<!-- fillRule = "nonzero");-->
<!-- boolean isPointInStroke(unrestricted double x, unrestricted double y);-->
<!-- boolean isPointInStroke(Path2D path, unrestricted double x, unrestricted double y);-->
<!-- };-->
<!-- interface mixin CanvasUserInterface {-->
<!-- void drawFocusIfNeeded(Element element);-->
<!-- void drawFocusIfNeeded(Path2D path, Element element);-->
<!-- void scrollPathIntoView();-->
<!-- void scrollPathIntoView(Path2D path);-->
<!-- };-->
<!-- interface mixin CanvasText {-->
<!-- // text (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)-->
<!-- void fillText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double-->
<!-- maxWidth);-->
<!-- void strokeText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double-->
<!-- maxWidth);-->
<!-- TextMetrics measureText(DOMString text);-->
<!-- };-->
<!-- interface mixin CanvasDrawImage {-->
<!-- // drawing images-->
<!-- void drawImage(CanvasImageSource image, unrestricted double dx, unrestricted double dy);-->
<!-- void drawImage(CanvasImageSource image, unrestricted double dx, unrestricted double dy, unrestricted double dw,-->
<!-- unrestricted double dh);-->
<!-- void drawImage(CanvasImageSource image, unrestricted double sx, unrestricted double sy, unrestricted double sw,-->
<!-- unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted-->
<!-- double dh);-->
<!-- };-->
<!-- interface mixin CanvasImageData {-->
<!-- // pixel manipulation-->
<!-- ImageData createImageData(long sw, long sh);-->
<!-- ImageData createImageData(ImageData imagedata);-->
<!-- ImageData getImageData(long sx, long sy, long sw, long sh);-->
<!-- void putImageData(ImageData imagedata, long dx, long dy);-->
<!-- void putImageData(ImageData imagedata, long dx, long dy, long dirtyX, long dirtyY, long dirtyWidth, long-->
<!-- dirtyHeight);-->
<!-- };-->
<!-- enum CanvasLineCap { "butt", "round", "square" };-->
<!-- enum CanvasLineJoin { "round", "bevel", "miter" };-->
<!-- enum CanvasTextAlign { "start", "end", "left", "right", "center" };-->
<!-- enum CanvasTextBaseline { "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" };-->
<!-- enum CanvasDirection { "ltr", "rtl", "inherit" };-->
<!-- interface mixin CanvasPathDrawingStyles {-->
<!-- // line caps/joins-->
<!-- attribute unrestricted double lineWidth; // (default 1)-->
<!-- attribute CanvasLineCap lineCap; // (default "butt")-->
<!-- attribute CanvasLineJoin lineJoin; // (default "miter")-->
<!-- attribute unrestricted double miterLimit; // (default 10)-->
<!-- // dashed lines-->
<!-- void setLineDash(sequence-->
<!-- <unrestricted double> segments); // default empty-->
<!-- sequence-->
<!-- <unrestricted double> getLineDash();-->
<!-- attribute unrestricted double lineDashOffset;-->
<!-- };-->
<!-- interface mixin CanvasTextDrawingStyles {-->
<!-- // text-->
<!-- attribute DOMString font; // (default 10px sans-serif)-->
<!-- attribute CanvasTextAlign textAlign; // (default: "start")-->
<!-- attribute CanvasTextBaseline textBaseline; // (default: "alphabetic")-->
<!-- attribute CanvasDirection direction; // (default: "inherit")-->
<!-- };-->
<!-- interface mixin CanvasPath {-->
<!-- // shared path API methods-->
<!-- void closePath();-->
<!-- void moveTo(unrestricted double x, unrestricted double y);-->
<!-- void lineTo(unrestricted double x, unrestricted double y);-->
<!-- void quadraticCurveTo(unrestricted double cpx, unrestricted double cpy, unrestricted double x,-->
<!-- unrestricted double y);-->
<!-- void bezierCurveTo(unrestricted double cp1x, unrestricted double cp1y, unrestricted double cp2x,-->
<!-- unrestricted double cp2y, unrestricted double x, unrestricted double y);-->
<!-- void arcTo(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double-->
<!-- y2, unrestricted double radius);-->
<!-- void rect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);-->
<!-- void arc(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double-->
<!-- startAngle, unrestricted double endAngle, optional boolean anticlockwise = false);-->
<!-- void ellipse(unrestricted double x, unrestricted double y, unrestricted double radiusX, unrestricted-->
<!-- double radiusY, unrestricted double rotation, unrestricted double startAngle, unrestricted double-->
<!-- endAngle, optional boolean anticlockwise = false);-->
<!-- };-->
<!-- [Exposed=(Window,Worker)]-->
<!-- interface CanvasGradient {-->
<!-- // opaque object-->
<!-- void addColorStop(double offset, DOMString color);-->
<!-- };-->
<!-- [Exposed=(Window,Worker)]-->
<!-- interface CanvasPattern {-->
<!-- // opaque object-->
<!-- void setTransform(optional DOMMatrix2DInit transform = {});-->
<!-- };-->
<!-- [Exposed=(Window,Worker)]-->
<!-- interface TextMetrics {-->
<!-- // x-direction-->
<!-- readonly attribute double width; // advance width-->
<!-- readonly attribute double actualBoundingBoxLeft;-->
<!-- readonly attribute double actualBoundingBoxRight;-->
<!-- // y-direction-->
<!-- readonly attribute double fontBoundingBoxAscent;-->
<!-- readonly attribute double fontBoundingBoxDescent;-->
<!-- readonly attribute double actualBoundingBoxAscent;-->
<!-- readonly attribute double actualBoundingBoxDescent;-->
<!-- readonly attribute double emHeightAscent;-->
<!-- readonly attribute double emHeightDescent;-->
<!-- readonly attribute double hangingBaseline;-->
<!-- readonly attribute double alphabeticBaseline;-->
<!-- readonly attribute double ideographicBaseline;-->
<!-- };-->
<!-- [Exposed=(Window,Worker),-->
<!-- Serializable]-->
<!-- interface ImageData {-->
<!-- constructor(unsigned long sw, unsigned long sh);-->
<!-- constructor(Uint8ClampedArray data, unsigned long sw, optional unsigned long sh);-->
<!-- readonly attribute unsigned long width;-->
<!-- readonly attribute unsigned long height;-->
<!-- readonly attribute Uint8ClampedArray data;-->
<!-- };-->
<!-- [Exposed=(Window,Worker)]-->
<!-- interface Path2D {-->
<!-- constructor(optional (Path2D or DOMString) path);-->
<!-- void addPath(Path2D path, optional DOMMatrix2DInit transform = {});-->
<!-- };-->
<!-- Path2D includes CanvasPath;-->
</body>
</html>