Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Build a P5.js Drawing Paint Editor Web App Using HTML5 CSS3 and Javascript in Browser

Posted on November 6, 2022

 

 

Welcome folks today in this blog post we will be building a drawing paint editor web app using P5.js library in html5 css3 and javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code. First of all we will be including the p5.js cdn as shown below

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>P5.js Paint Drawing App Editor</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css">
<body>
 
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
</html>

 

 

After that we need to add the DOM Elements for the drawing app. We need to add the sidebar where we will having the paint brush and then we will having the canvas to draw something on the screen

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="sidebar">
        <ul>
            <li>
                <label for="color">Color:</label>
                <input type="color" id="color" />
            </li>
            <li>
                <label for="weight">Stroke:</label>
                <input type="number" id="weight" min="2" max="200" value="3" />
            </li>
            <li>
                <button id="clear"><i class="fa fa-trash"></i></button>
            </li>
        </ul>
    </div>

 

 

As you can see we have the ability to choose the color from the color picker input and then we have the input field to choose the weight of the stroke of the paint app. And then we have the button to clear out everything from the screen or this is the eraser of the paint app.

 

 

Now we need to add the css styles for the DOM Elements so that the paint drawing app can be styled as shown below

 

 

CSS
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
<style>
    @import url('https://fonts.googleapis.com/css?family=Lato');
 
* {
box-sizing: border-box;
}
 
body {
min-height: 100vh;
font-family: 'Lato', sans-serif;
margin: 0;
overflow: hidden;
}
 
h4 {
background-color: #fff;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 10px;
text-align: center;
user-select: none;
}
 
.sidebar {
background-color: #333;
box-shadow: 0px 0px 10px rgba(30, 30, 30, 0.7);
color: #fff;
position: absolute;
left: 0;
top: 0;
height: 100vh;
padding: 5px;
z-index: 1000;
}
 
.sidebar ul {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
list-style-type: none;
padding: 0;
margin: 0;
height: 100%;
}
 
.sidebar ul li {
padding: 5px 0;
}
 
.sidebar input, .sidebar button {
text-align: center;
width: 45px;
}
 
.sidebar li:last-of-type {
margin-top: auto;
}
 
.sidebar button {
background-color: transparent;
border: none;
color: #fff;
font-size: 20px;
}
 
.sidebar label {
display: block;
font-size: 12px;
margin-bottom: 3px;
}
</style>

 

 

Now if you open the index.html inside the browser you will see the below result as shown below

 

 

 

 

 

As you can see we have the sidebar section where we have all the drawing app elements. Inside the sidebar we have the color picker and then we have the input field and then we have trash icon to clear everything from the screen.

 

 

Adding Javascript Code

 

 

Now we will be adding the javascript code for the paint drawing app. Inside the javascript we will be using the p5.js library to draw something on the screen using the color selected from the color picker.

 

 

Now first of all we will be getting all the references from the DOM using the id's given to the elements. For this you need to copy paste the below code

 

 

JavaScript
1
2
3
4
5
const colorInput = document.getElementById('color');
const weight = document.getElementById('weight');
const clear = document.getElementById('clear');
const paths = [];
let currentPath = [];

 

 

As you can see we have declared the paths variable which is empty by default. And then we have another variable currentPath which is empty by default. And then we are getting the references of the buttons which is used for clearing the canvas and then colorInput which is used for getting the colorpicker and then getting the weight of the paint.

 

 

Now we will be calling the setup() method of the p5.js library. Inside the p5.js library we have different methods which is used for rendering things on the screen. For initializing the widgets you can use the setup() method

 

 

JavaScript
1
2
3
4
function setup() {
   createCanvas(window.innerWidth, window.innerHeight);
   background(255);
}

 

 

As you can see inside this method we are first of all creating the canvas with dynamic width and height. For this we are using the createCanvas() method and here we are passing the window inner width and inner height. And then we are setting the background color of the canvas and then we are passing the rgb value i.e. 255 which is white color.

 

 

Adding the Mouse Press Event

 

 

Now we will be adding the mouse press event in order to draw something on the screen using the mouse press. For this we have the method which is built in p5.js library which is shown below

 

 

JavaScript
1
2
3
4
function mousePressed() {
currentPath = [];
paths.push(currentPath);
}

 

 

As you can see we are calling the mousePressed() method and inside it we are declaring the currentPath variable to an empty value. And then we are pushing the current path to the paths array.

 

 

Drawing on the Screen

 

 

Now we will be drawing something on the screen using the draw() method. Inside this method we are first of all drawing something using the x and y coordinates. And then we are getting the colorInput value and then we are also getting the stroke value input.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function draw() {
noFill();
if(mouseIsPressed){
const point = {
x: mouseX,
y: mouseY,
color: colorInput.value,
weight: weight.value
};
currentPath.push(point);
}
paths.forEach(path => {
beginShape();
path.forEach(point => {
stroke(point.color);
strokeWeight(point.weight);
vertex(point.x, point.y);
});
endShape();
});
}

 

 

As you can see we are initializing the point object inside that we have the x, y values and then we are also adding the color input values and also we are adding the weight values. And then we are adding the currentPath to the point array. And then we are looping through all the paths and inside the loop we are using the stroke() method and we are passing the color of the point. And then we are using the vertex() method to draw the point on the screen using x and y.

 

 

Clear out Everything on Screen

 

 

Now we will be clearing out everything from the screen. You should copy paste the below code in javascript

 

 

JavaScript
1
2
3
4
clear.addEventListener('click', () => {
paths.splice(0);
background(255);
});

 

 

And inside the above method we are binding the method to the clear button. And inside that method we are removing all the paths from the screen and also we are setting the background color of the canvas to white.

 

 

And now if you open the index.html file inside the browser you will see the below result

 

 

 

 

 

FULL SOURCE CODE

 

 

Wrapping the blog post this is the full source code of the index.html file as shown below

 

 

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
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css">
<style>
    @import url('https://fonts.googleapis.com/css?family=Lato');
 
* {
box-sizing: border-box;
}
 
body {
min-height: 100vh;
font-family: 'Lato', sans-serif;
margin: 0;
overflow: hidden;
}
 
h4 {
background-color: #fff;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 10px;
text-align: center;
user-select: none;
}
 
.sidebar {
background-color: #333;
box-shadow: 0px 0px 10px rgba(30, 30, 30, 0.7);
color: #fff;
position: absolute;
left: 0;
top: 0;
height: 100vh;
padding: 5px;
z-index: 1000;
}
 
.sidebar ul {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
list-style-type: none;
padding: 0;
margin: 0;
height: 100%;
}
 
.sidebar ul li {
padding: 5px 0;
}
 
.sidebar input, .sidebar button {
text-align: center;
width: 45px;
}
 
.sidebar li:last-of-type {
margin-top: auto;
}
 
.sidebar button {
background-color: transparent;
border: none;
color: #fff;
font-size: 20px;
}
 
.sidebar label {
display: block;
font-size: 12px;
margin-bottom: 3px;
}
</style>
<body>
    <div class="sidebar">
        <ul>
            <li>
                <label for="color">Color:</label>
                <input type="color" id="color" />
            </li>
            <li>
                <label for="weight">Stroke:</label>
                <input type="number" id="weight" min="2" max="200" value="3" />
            </li>
            <li>
                <button id="clear"><i class="fa fa-trash"></i></button>
            </li>
        </ul>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script>
    const colorInput = document.getElementById('color');
const weight = document.getElementById('weight');
const clear = document.getElementById('clear');
const paths = [];
let currentPath = [];
 
function setup() {
   createCanvas(window.innerWidth, window.innerHeight);
   background(255);
}
 
function draw() {
noFill();
if(mouseIsPressed){
const point = {
x: mouseX,
y: mouseY,
color: colorInput.value,
weight: weight.value
};
currentPath.push(point);
}
paths.forEach(path => {
beginShape();
path.forEach(point => {
stroke(point.color);
strokeWeight(point.weight);
vertex(point.x, point.y);
});
endShape();
});
}
 
function mousePressed() {
currentPath = [];
paths.push(currentPath);
}
 
clear.addEventListener('click', () => {
paths.splice(0);
background(255);
});
</script>
</html>

Recent Posts

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme