-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
122 lines (118 loc) · 6.21 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
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/fabric.min.js"></script>
</head>
<body>
<div class="container">
<div class="container-tools">
<div class="tools extra">
<label class="container-button container-label">Tools: </label>
<div class="container-button selection">
<input id="selection" type="button" value="Selection" />
</div>
<div class="container-button">
<input id="cut" type="button" value="Cut" />
</div>
<div class="container-button">
<input id="copy" type="button" value="Copy" />
</div>
<div class="container-button">
<input id="paste" type="button" value="Paste" />
</div>
<div class="container-button">
<input id="delete" type="button" value="Delete" />
</div>
<div class="container-button">
<input id="seToBack" type="button" value="Set to Back" />
</div>
<div class="container-button">
<input id="seToFront" type="button" value="Set to Front" />
</div>
<div class="container-button">
<a href="javascript:;" id="save">Save as Image</a>
</div>
<div class="container-button">
<input id="imageUpload" type="file" value="Image" />
</div>
</div>
<div class="tools shaps">
<label class="container-button container-label">Shaps: </label>
<div class="container-button">
<input id="circle" type="button" value="Circle" />
</div>
<div class="container-button">
<input id="oval" type="button" value="Oval" />
</div>
<div class="container-button">
<input id="rect" type="button" value="Rectangle" />
</div>
<div class="container-button">
<input id="line" type="button" value="Line" />
</div>
<div class="container-button">
<input class="active" id="pencil" type="button" value="Pencil" />
</div>
</div>
<div class="tools stroke">
<label class="container-button container-label">Stroke: </label>
<div class="container-button">
<input class="strokeWidth" data-sw="1" type="button" value="Stroke 1" />
</div>
<div class="container-button">
<input class="strokeWidth active" data-sw="2" type="button" value="Stroke 2" />
</div>
<div class="container-button">
<input class="strokeWidth" data-sw="4" type="button" value="Stroke 3" />
</div>
<div class="container-button">
<input class="strokeWidth" data-sw="6" type="button" value="Stroke 4" />
</div>
</div>
<div class="tools Text">
<label class="container-button container-label">Text: </label>
<div class="container-button">
<input id="fontSize" type="number" value="11" />
</div>
<div class="text-add container-button">
<input id="addText" type="button" value="Add Text" />
</div>
<div class="container-button">
<input id="bold" type="button" data-activeType="bold" data-inActiveType="normal" value="B" />
</div>
<div class="container-button">
<input id="italic" type="button" data-activeType="italic" data-inActiveType="normal" value="I" />
</div>
<div class="container-button">
<input id="underLine" type="button" data-activeType="underline" data-inActiveType="" value="U" />
</div>
</div>
<div class="tools ColorBox">
<label class="container-button container-label">Colors: </label>
<div class="container-button">
<input class="colorBtn floatLeft active" data-type="color1" type="button" value="Color 1" /><span class="selectedColor1"></span>
</div>
<div class="container-button">
<input class="colorBtn floatLeft" data-type="color2" type="button" value="Color 2" /><span class="selectedColor2"></span>
</div>
<div class="color-palatte">
<a class="color" href="javascript:;" data-color="#FFFFFF" style="background-color:#FFFFFF"></a>
<a class="color" href="javascript:;" data-color="#FF0000" style="background-color:#FF0000"></a>
<a class="color" href="javascript:;" data-color="#FF00FF" style="background-color:#FF00FF"></a>
<a class="color" href="javascript:;" data-color="#00FF00" style="background-color:#00FF00"></a>
<a class="color" href="javascript:;" data-color="#00FFFF" style="background-color:#00FFFF"></a>
<a class="color" href="javascript:;" data-color="#0000FF" style="background-color:#0000FF"></a>
<a class="color" href="javascript:;" data-color="#FFFF00" style="background-color:#FFFF00"></a>
<a class="color" href="javascript:;" data-color="#F0F0F0" style="background-color:#F0F0F0"></a>
<a class="color" href="javascript:;" data-color="#000000" style="background-color:#000000"></a>
</div>
</div>
</div>
<div class="container-body">
<canvas width="1200px" height="490px" id="canvas"></canvas>
</div>
</div>
<script type="text/javascript" src="js/canvas.js"></script>
</body>
</html>