-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
124 lines (106 loc) · 3.33 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
<html>
<head>
<title>Lab 1</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header><strong>Sketch Pad</strong></header>
<div id="canvas_container">
<canvas id="canvas" width="700" height="500"></canvas>
</div>
<!--<img src="connect_apple.png">-->
<div id="colors">
<button style="background-color:blue" onclick="blue()"></button>
<button style="background-color:red" onclick="red()"></button>
<button style="background-color:yellow" onclick="yellow()"></button>
<button style="background-color:green" onclick="green()"></button>
<button style="background-color:orange" onclick="orange()"></button>
<button style="background-color:black" onclick="black()"></button>
<button style="background-color:purple" onclick="purple()"></button>
<button style="background-color:pink" onclick="pink()"></button>
<button style="background-color:#6bd6cd" onclick="light_blue()"></button>
<button style="background-color:gray" onclick="gray()"></button>
</div>
<div class="button_c">
<button onclick="clearPaint()">Clear</button>
</div>
<footer>
<strong> NOTE: </strong>Just click once and start to draw. Click again when you are done.
</footer>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var second;
var isDrawing;
var rect = canvas.getBoundingClientRect();
context.lineWidth = 5;
context.lineJoin = context.lineCap = 'round';
context.fillStyle = "red";
context.strokeStyle = "black";
canvas.onmousedown = function(event) {
isDrawing = true;
context.moveTo(event.clientX - rect.left, event.clientY - rect.top);
}
canvas.onmousemove = function(event) {
if (isDrawing) {
//context.beginPath();
context.lineTo(event.clientX -rect.left, event.clientY - rect.top);
context.stroke();
}
}
canvas.onmouseup = function() {
if(second == true){
isDrawing = false;
second = false;
}
else{
second = true;
}
}
function clearPaint(){
window.location.reload();
}
function blue(){
context.beginPath();
context.strokeStyle = "blue";
}
function red(){
context.beginPath();
context.strokeStyle = "red";
}
//green, orange, black, purple, pink, light blue,
function yellow(){
context.beginPath();
context.strokeStyle = "yellow";
}
function green(){
context.beginPath();
context.strokeStyle = "green";
}
function orange(){
context.beginPath();
context.strokeStyle = "orange";
}
function black(){
context.beginPath();
context.strokeStyle = "black";
}
function purple(){
context.beginPath();
context.strokeStyle = "purple";
}
function pink(){
context.beginPath();
context.strokeStyle = "pink";
}
function light_blue(){
context.beginPath();
context.strokeStyle = "#6bd6cd";
}
function gray(){
context.beginPath();
context.strokeStyle = "gray";
}
</script>
</body>
</html>