forked from thedevyansh/painting-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (114 loc) · 3.86 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
<!-- A fairly simple painting app with facilities to change brush size, stroke shape and color of brush. The shape of the stroke is a square of side equal to the brush size -->
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<meta name= "viewport" content= "width= device-width, initial-scale= 1.0">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Painting App</title>
<style>
body {
margin:0;
overflow:hidden;
background-color: rgb(172,172,172);
}
.container-fluid {
background-color: rgb(172,172,172);
width: 100%
height: 95px;
}
input[type= "color"] {
width: 40%;
margin: 5px auto;
display: block;
}
input [type= "range"] {
width: 10%;
}
span {
bottom: 5px;
color: #ffffff;
font-family: georgia;
}
#selectShape, #toolbar {
padding: 8px;
}
#selectShape {
margin-left: 45%;
}
</style>
</head>
<body>
<div class="container-fluid" id="toolbar">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<input type="color" value="#ff8080">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<input type="range" min="5" max="50" value="10"><span class="display">10</span>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button type="button" class="btn btn-primary btn-md">Clear Canvas</button>
</div>
</div>
</div>
<div class="container-fluid" id="selectShape">
<div class="row">
<button class="btn btn-warning btn-md" onclick="drawRect()" id="rectStroke">Rect Stroke</button>
</div>
</div>
<canvas class= "myCanvas">
</canvas>
<script>
const canvas= document.querySelector('.myCanvas');
const width= canvas.width= window.innerWidth;
const height= canvas.height= window.innerHeight-105;
const ctx= canvas.getContext('2d');
ctx.fillStyle= 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);
const colorPick= document.querySelector('input[type= "color"]');
const sizePick= document.querySelector('input[type="range"]');
const clearbutton= document.querySelector('button');
const update= document.querySelector('.display');
// declaring X and Y to keep track of the cursor position
// declaring press to paint when the mouse button is pressed
let X;
let Y;
let press= false;
function degTorad(degree) {
return degree * Math.PI / 180;
};
canvas.onmousedown = function() {
press= true;
}
canvas.onmouseup = function() {
press= false;
}
sizePick.oninput= function() {
update.textContent= sizePick.value;
}
clearbutton.onclick= function() {
ctx.fillStyle= 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);
}
// pageX and clientX are used to determine the position of cursor in pixels
// scrollLeft and scrollTop are used to find number of pixels by which the elements have been scrolled horizontally and vertically resp
document.onmousemove= function(event) {
X= (window.Event) ? event.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft :
document.body.scrollLeft);
Y= (window.Event) ? event.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop :
document.body.scrollTop);
}
function drawRect() {
if (press) {
ctx.fillStyle= colorPick.value;
ctx.fillRect(X,Y-105,sizePick.value,sizePick.value);
}
window.requestAnimationFrame(drawRect);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</body>
</html>