-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
51 lines (41 loc) · 1.83 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style/main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="time_stats">
Canvas render time: <span id='time_taken'></span>
</div>
<h2 style="margin-top: 20px;">A Quick Alternative to Canvas</h2>
<p class="description">
This is an experiment to see whether or not it is possible to create a simple alternative to HTML5 Canvas. To draw rectangles, click somewhere on the canvas and then somewhere else to finish the rectangle. The rectangle will form between the x1, x2, y1, and y2 you clicked at. Switch the mode to <i>Draw</i> and hold down your mouse while drawing. Click any of the colors below to change the color of the pen.
</p><br>
<img id="canvas" src="" alt="" /> <!-- this is the canvas -->
<br>
<div class="container">
<h2>Colors</h2>
<div class="ind-color red" color="[166,75,75]"></div>
<div class="ind-color orange" color="[213,164,68]"></div>
<div class="ind-color yellow" color="[219,213,48]"></div>
<div class="ind-color green" color="[75,175,85]"></div>
<div class="ind-color blue" color="[59,117,170]"></div>
<div class="ind-color purple" color="[153,59,170]"></div>
</div>
<br>
<div class="container">
<h2>Mode</h2>
<div class="option drawing selected">Draw</div><br>
<div class="option rectangle">Add Rectangle</div>
</div>
<div class="container">
<h3>Brush Size</h3>
<input type="range" min="1" max="50" id="brush_size" value="">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/canvas.js" charset="utf-8"></script>
<script src="js/main.js" charset="utf-8"></script>
</html>