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

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

<!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>

<!DOCTYPE html>

<head>

<title>P5.js Paint Drawing App Editor</title>

</head>

<body>

</body>

</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

<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>

<ul>

<li>

<label for="color">Color:</label>

</li>

<li>

<label for="weight">Stroke:</label>

</li>

<li>

</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

<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>

<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

 const colorInput = document.getElementById('color');
const weight = document.getElementById('weight');
const clear = document.getElementById('clear');
const paths = [];
let currentPath = [];

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

function setup() {
  	createCanvas(window.innerWidth, window.innerHeight);
  	background(255);
}

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

function mousePressed() {
	currentPath = [];
	paths.push(currentPath);
}

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.

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 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

clear.addEventListener('click', () => {
	paths.splice(0);
	background(255);
});

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

<!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>

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>

<head>

<title>Document</title>

</head>

<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>

<ul>

<li>

<label for="color">Color:</label>

</li>

<li>

<label for="weight">Stroke:</label>

</li>

<li>

</li>

</ul>

</div>

</body>

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>