Skip to content

Commit f5ecc35

Browse files
Vishal-raj-1Vishal-raj-1
authored
Merge pull request #1910 from Sulagna-Dutta-Roy/Sulagna
Drawing App
2 parents af0f9a9 + c4f8fa8 commit f5ecc35

6 files changed

Lines changed: 1736 additions & 15 deletions

File tree

‎assets/Images/Drawing App/Drawing.PNG‎

91.8 KB
Loading

‎assets/css/Drawing App/style.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
body
2+
{
3+
background: url(https://cdn.pixabay.com/photo/2016/01/19/14/53/book-1149031__340.jpg) center center fixed;
4+
text-align: center;
5+
background-size: cover;
6+
}
7+
#header
8+
{
9+
background: linear-gradient(white,rgba(128,128,128,0.1));
10+
background:-o-linear-gradient(white,rgba(128,128,128,0.1));
11+
background:-moz-linear-gradient(white,rgba(128,128,128,0.1));
12+
background:-webkit-linear-gradient(white,rgba(128,128,128,0.1));
13+
height: 70px;
14+
width: 500px;
15+
margin: 8px auto;
16+
font-size: 2em;
17+
color: rgb(7, 7, 7);
18+
line-height: 60px;
19+
}
20+
.inputContainer
21+
{
22+
width: 300px;
23+
margin: 0 auto;
24+
}
25+
.input
26+
{
27+
height: 40px;
28+
font-size: 1.6em;
29+
}
30+
#slider
31+
{
32+
margin: 10px auto;
33+
}
34+
#circle
35+
{
36+
height: 5px;
37+
width: 1px;
38+
border-radius: 50%;
39+
background: black;
40+
margin: 0 auto;
41+
position: absolute;
42+
top: 60%;
43+
left: 50%;
44+
transform:translate(-50%, -50%);
45+
-webkit-transform:translate(-50%, -50%);
46+
-moz-transform:translate(-50%, -50%);
47+
-o-transform:translate(-50%, -50%);
48+
}
49+
#thicknessInput
50+
{
51+
position: relative;
52+
}
53+
#container
54+
{
55+
width: 500px;
56+
height: 400px;
57+
border: 1px solid rgba(122,174,229,0.5);
58+
margin: 10px auto;
59+
}
60+
.inputContainer2
61+
{
62+
width: 399px;
63+
margin: 0 auto;
64+
}
65+
#paint
66+
{
67+
background-color: #fff;
68+
cursor: crosshair;
69+
}
70+
.input2
71+
{
72+
width: 133px;
73+
color: grey;
74+
font-size: 1.0em;
75+
float: left;
76+
}
77+
.button
78+
{
79+
background: #fff;
80+
height: 50px;
81+
padding: 10px;
82+
border-radius: 3px;
83+
font-weight: bold;
84+
cursor: pointer;
85+
box-shadow: 0px 4px rgba(0,0,0,0.3);
86+
-webkit-box-shadow: 0px 4px rgba(0,0,0,0.3);
87+
-moz-box-shadow: 0px 4px rgba(0,0,0,0.3);
88+
-o-box-shadow: 0px 4px rgba(0,0,0,0.3);
89+
position: relative;
90+
}
91+
.button:hover
92+
{
93+
color: white;
94+
background: linear-gradient(white,rgba(128,128,128,0.1));
95+
background:-o-linear-gradient(white,rgba(128,128,128,0.1));
96+
background:-moz-linear-gradient(white,rgba(128,128,128,0.1));
97+
background:-webkit-linear-gradient(white,rgba(128,128,128,0.1));
98+
}
99+
.button:active
100+
{
101+
top: 4px;
102+
}
103+
.eraseMode
104+
{
105+
background-color: red;
106+
color: #fff;
107+
}

‎assets/js/Drawing App/script.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
$(function ()
2+
{
3+
//variables for function
4+
5+
//paintingerasting or not
6+
var paint = false;
7+
8+
//painting
9+
var paint_erase = 'paint';
10+
11+
//get canvas and context
12+
var canvas = document.getElementById('paint');
13+
var ctx = canvas.getContext('2d');
14+
15+
//get the canvas container
16+
var container = $('#container');
17+
18+
//mouse position
19+
var mouse = {x: 0, y: 0};
20+
21+
//onload load saved
22+
if(localStorage.getItem('imgCanvas') != null) {
23+
var img = new Image();
24+
img.onload = function () {
25+
ctx.drawImage(img, 0, 0);
26+
}
27+
img.src = localStorage.getItem('imgCanvas');
28+
};
29+
ctx.lineWidth = 3;
30+
ctx.linejoin = 'round';
31+
ctx.lineCap = 'round';
32+
//click inside button
33+
container.mousedown(function (e) {
34+
paint = true;
35+
ctx.beginPath();
36+
mouse.x = e.pageX - this.offsetLeft;
37+
mouse.y = e.pageY - this.offsetTop;
38+
ctx.moveTo(mouse.x, mouse.y);
39+
});
40+
//move the mouse
41+
container.mousemove(function (e) {
42+
mouse.x = e.pageX - this.offsetLeft;
43+
mouse.y = e.pageY - this.offsetTop;
44+
if (paint == true) {
45+
if (paint_erase == 'paint') {
46+
ctx.strokeStyle = $('#paintColor').val();
47+
}
48+
else
49+
{
50+
ctx.strokeStyle = 'white';
51+
}
52+
ctx.lineTo(mouse.x, mouse.y);
53+
ctx.stroke();
54+
}
55+
});
56+
//mouse up -> we are not paintingerasting anymore
57+
container.mouseup(function () {
58+
paint = false;
59+
});
60+
container.mouseleave(function () {
61+
paint = false;
62+
});
63+
//////////////////////////////////////
64+
$('#reset').click(function () {
65+
ctx.clearRect(0, 0, canvas.width, canvas.height);
66+
paint_erase = 'paint';
67+
$('#erase').removeClass('eraseMode');
68+
});
69+
$('#save').click(function () {
70+
if (typeof (localStorage) != null) {
71+
localStorage.setItem('imgCanvas', canvas.toDataURL());
72+
}
73+
else{
74+
window.alert('Your browser does not support localstorage!');
75+
}
76+
});
77+
$('#erase').click(function () {
78+
if (paint_erase == 'paint') {
79+
paint_erase = 'erase';
80+
}
81+
else{
82+
paint_erase = 'paint';
83+
}
84+
$(this).toggleClass('eraseMode');
85+
});
86+
// change color input
87+
$('#paintColor').change(function () {
88+
$('#circle').css('background-color',$(this).val());
89+
});
90+
$('#slider').slider({
91+
min: 3,
92+
max: 30,
93+
slide:function(event,ui) {
94+
$('#circle').height(ui.value),
95+
$('#circle').width(ui.value);
96+
ctx.lineWidth = ui.value;
97+
}
98+
});
99+
100+
});

‎public/Drawing App/README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<h1>Drawing App</h1>
2+
3+
<h2>Aim</h2>
4+
<p>I've made a app that let user can create their small paintings.</p>
5+
6+
<h3>Workflow</h3>
7+
<p>The user can draw anything they want. They can change all the colors.</p>
8+
9+
<h2>Short Description</h2>
10+
<p>This app provides drawing assets for every user.There are three buttons erase,reset and save.The user can change all the colors that they want.I've added one slider also.The slider can increase and decrease the color fill. I Implemented it using html,css,Javascript. If the user wants to erase the painting then click erase or they can save .Reset option also provided.</p>
11+
12+
<h4>How to Run the files:</h4>
13+
<ul>
14+
<li>Open the folder in the text editor</li>
15+
<li>Run the Index.html file</li>
16+
</ul>
17+
18+
<h2>Output</h2>
19+
20+
![Drawing](https://user-images.githubusercontent.com/72568715/126911834-e8c89c20-4794-4340-9566-e5f7bd9447d4.PNG)
21+
22+
![Drawing1](https://user-images.githubusercontent.com/72568715/126911835-2f75270d-b89c-4664-b097-78aecfbc8f70.PNG)
23+
24+
<h3>Author:</h3>
25+
<p>Sulagna Dutta Roy</p>

‎public/Drawing App/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
6+
<title>Drawing App</title>
7+
<link rel="stylesheet" href="../../assets/css/Drawing App/style.css">
8+
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css">
9+
</head>
10+
<body>
11+
<!----------------------->
12+
<div id="header">Drawing App</div>
13+
<!----------------------->
14+
<div class="inputContainer">
15+
<!-------------------->
16+
<div id="input" id="colorInput">
17+
<input type="color" list id="paintColor">
18+
</div>
19+
<!----------------------->
20+
<div class="input" id="thicknessInput">
21+
<div id="circle"></div>
22+
</div>
23+
<div id="input">
24+
<div id="slider"></div>
25+
</div>
26+
</div>
27+
<!-------------------------------------->
28+
<div id="container">
29+
<canvas id="paint" width="500px" height="400px">
30+
31+
</canvas>
32+
</div>
33+
<div class="inputContainer2">
34+
<!-------------------------->
35+
<div class="input2">
36+
<span id="erase" class="button">Erase</span>
37+
</div>
38+
<!-------------------------->
39+
<div class="input2">
40+
<span id="reset" class="button">Reset</span>
41+
</div>
42+
<!-------------------------->
43+
<div class="input2">
44+
<span id="save" class="button">Save</span>
45+
</div>
46+
</div>
47+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
48+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
49+
<script src="../..assets/js/Drawing App/script.js"></script>
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)