-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathDrawingPad.html
88 lines (74 loc) · 3 KB
/
DrawingPad.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
<!DOCTYPE html>
<html>
<head>
<title>Anaglyph Drawing App</title>
<link href="styles/Anaglyphs.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/DrawingPad.js"></script>
<script type="text/javascript" src="scripts/Anaglyphs.js"></script>
<table>
<tr><td id="canvasArea" class="white">
<canvas id="canvas">Your browser does not support the HTML 5 Canvas.</canvas></td>
<td class="padcontrol">
<p class="padheader">Anaglyph Drawing Pad</p>
<input type="button" value="Clear" id="clearCanvas">
<input type="button" value="Eraser" id="eraser">
<input type="button" value="Undo" id="Undo">
<input type="button" value="Redo" id="Redo">
<br> <br>
Depth: <output name="offsetOutput" id="offsetOutputId">3</output>
<input type="range" value="3" min="-10" max="10" step="0.5" id="offset"
oninput="offsetOutputId.value = offset.value">
Size: <output name="lineWidthOutput" id="lineWidthOutputId">5</output>
<input type="range" value="5" min="1" max="40" step="0.5" id="lineWidth"
oninput="lineWidthOutputId.value = lineWidth.value">
<br> <br>
Font:<br>
<select id="textfont">
<option value="arial">Arial</option>
<option value="veranda">Verdana</option>
<option value="tahoma">Tahoma</option>
<option value="trebuchet ms">Trebuchet MS</option>
<option value="times new roman">Times New Roman</option>
<option value="georgia">Georgia</option>
<option value="Garamond">Garamond</option>
<option value="courier new">Courier New</option>
<option value="brush script mt">Brush Script MT</option>
</select><br>
Text:<br>
<input type="text" id="stringValue">
<input type="button" value="Place text" id="placeText">
<br> <br>
Stamp:<br>
<select id="stamps"></select><br>
<input type="button" value="Place stamp" id="placeStamp">
<br> <br>
Upload file:<br>
<input type="file" value="Upload image" id="upload">
<input type="button" value="Download image" onclick="download()">
</td></tr>
</table>
<center><font size="-1">Use red-cyan glasses to see your drawing in 3D -
<b>Keys:</b> u - Undo, r - Redo, l - Increase width, s - decrease width,
b - increase depth, f - decrease depth</font></center>
<script type="text/javascript">drawingApp.init();</script>
<script>
function getRandomFileName() {
var timestamp = new Date().toISOString().replace(/[-:.]/g,"");
var random = ("" + Math.random()).substring(2, 8);
var random_number = timestamp+random;
return "Anaglyph-"+random_number+".png";
}
function download() {
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL("image/png");
var link = document.createElement("a");
link.href = dataURL;
link.download = getRandomFileName();
link.click();
}
</script>
</body>
</html>